/* ===================================================
   JD-Juice Lab - 研究室機材選定データベース スタイルシート
   Design Pattern: Authority/Database (学術系)
   =================================================== */

/* --- CSS Variables (デザイントークン) --- */
:root {
  /* プライマリカラー (Navy/Academic) */
  --color-primary: #0f4c75;
  --color-primary-dark: #0a3a5c;
  --color-secondary: #3282b8;
  --color-accent: #1e88e5;

  /* 背景・テキスト */
  --color-bg: #f8f9fa;
  --color-bg-card: #ffffff;
  --color-bg-dark: #1a1a2e;
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-text-light: #ffffff;

  /* ステータス */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-info: #17a2b8;

  /* ボーダー */
  --color-border: #dee2e6;
  --color-border-dark: #adb5bd;

  /* フォント */
  --font-main: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-heading: 'Outfit', 'Noto Sans JP', sans-serif;

  /* スペーシング */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* シャドウ */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* ボーダー半径 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* トランジション */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* --- リセット & ベース --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.8;
  min-height: 100vh;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

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

/* --- ステマ規制対応バナー --- */
.pr-disclosure {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  color: var(--color-text-light);
  text-align: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.pr-disclosure::before {
  content: "【PR】";
  margin-right: var(--spacing-sm);
  font-weight: 700;
}

/* --- ヘッダー --- */
.site-header {
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  display: flex;
  flex-direction: column;
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.site-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.nav-main ul {
  display: flex;
  list-style: none;
  gap: var(--spacing-lg);
}

.nav-main a {
  color: var(--color-text);
  font-weight: 500;
  padding: var(--spacing-sm) 0;
  position: relative;
}

.nav-main a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width var(--transition-normal);
}

.nav-main a:hover::after {
  width: 100%;
}

.nav-main a:hover {
  text-decoration: none;
  color: var(--color-secondary);
}

/* --- メインコンテンツ --- */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

/* --- ヒーローセクション (データベースポータル風) --- */
.hero-portal {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
  padding: var(--spacing-xl) var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-portal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.hero-portal>* {
  position: relative;
  z-index: 1;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-description {
  font-size: 1.1rem;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto var(--spacing-lg);
  line-height: 1.8;
}

/* --- Archive Info ボックス (旧プロジェクト継承) --- */
.archive-info {
  background: linear-gradient(to right, var(--color-info), #20c997);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--color-text-light);
}

.archive-info-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.archive-info-content h3 {
  font-size: 1rem;
  margin-bottom: var(--spacing-xs);
}

.archive-info-content p {
  font-size: 0.875rem;
  opacity: 0.9;
  margin: 0;
}

/* --- セクション --- */
.section {
  margin-bottom: var(--spacing-xl);
}

.section-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-primary);
  padding-bottom: var(--spacing-sm);
  border-bottom: 3px solid var(--color-secondary);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.section-title::before {
  content: '';
  width: 4px;
  height: 1.5em;
  background: var(--color-secondary);
  border-radius: 2px;
}

/* --- カード --- */
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-header {
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: var(--spacing-md) var(--spacing-lg);
}

.card-body {
  padding: var(--spacing-lg);
}

.card-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* --- 記事カードグリッド --- */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--spacing-lg);
}

.article-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.article-card-image {
  height: 180px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-size: 3rem;
}

.article-card-content {
  padding: var(--spacing-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-card-category {
  display: inline-block;
  background: var(--color-info);
  color: var(--color-text-light);
  font-size: 0.75rem;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
}

.article-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;
}

.article-card-excerpt {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  flex: 1;
  margin-bottom: var(--spacing-md);
}

.article-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-secondary);
  font-weight: 600;
  transition: gap var(--transition-fast);
}

.article-card-link:hover {
  gap: var(--spacing-sm);
  text-decoration: none;
}

/* --- 公式風ボックス --- */
.official-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.official-box-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

/* --- テーブル (データベース風) --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.data-table thead {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.data-table th,
.data-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.data-table tbody tr:nth-child(even) {
  background: var(--color-bg);
}

.data-table tbody tr:hover {
  background: #e3f2fd;
}

/* --- ハイライトボックス (記事用) --- */
.highlight-box {
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin: var(--spacing-lg) 0;
}

.highlight-box--info {
  background: #e3f2fd;
  border-left: 4px solid var(--color-info);
}

.highlight-box--success {
  background: #e8f5e9;
  border-left: 4px solid var(--color-success);
}

.highlight-box--warning {
  background: #fff8e1;
  border-left: 4px solid var(--color-warning);
}

.highlight-box-title {
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-text-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-text-light);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-text-light);
}

/* --- フッター --- */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  padding: var(--spacing-xl) 0 var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.footer-section h4 {
  font-size: 1rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-secondary);
}

.footer-section ul {
  list-style: none;
}

.footer-section li {
  margin-bottom: var(--spacing-sm);
}

.footer-section a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.footer-section a:hover {
  color: var(--color-text-light);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--spacing-lg);
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}

/* --- アニメーション --- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .nav-main ul {
    gap: var(--spacing-md);
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .articles-grid {
    grid-template-columns: 1fr;
  }

  .archive-info {
    flex-direction: column;
    text-align: center;
  }

  .data-table {
    display: block;
    overflow-x: auto;
  }
}

/* --- 記事本文用スタイル --- */
.article-content {
  max-width: 800px;
  margin: 0 auto;
}

.article-content h1 {
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 3px solid var(--color-secondary);
}

.article-content h2 {
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-border);
}

.article-content h3 {
  font-size: 1.25rem;
  color: var(--color-secondary);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.article-content p {
  margin-bottom: var(--spacing-md);
}

.article-content ul,
.article-content ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.article-content li {
  margin-bottom: var(--spacing-sm);
}

/* --- 商品リンクカード (LinkSwitch用) --- */
.product-link-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  transition: all var(--transition-normal);
}

.product-link-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

.product-link-icon {
  font-size: 2.5rem;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.product-link-content {
  flex: 1;
}

.product-link-title {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.product-link-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.product-link-url {
  font-size: 0.85rem;
  color: var(--color-secondary);
  word-break: break-all;
}

/* --- パンくずリスト --- */
.breadcrumb {
  padding: var(--spacing-md) 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb a:hover {
  color: var(--color-secondary);
}

.breadcrumb-separator {
  margin: 0 var(--spacing-sm);
}

/* --- 著者プロフィール --- */
.author-profile {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  border: 1px solid var(--color-border);
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-text-light);
  flex-shrink: 0;
}

.author-info {
  flex: 1;
}

.author-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a365d;
  margin-bottom: var(--spacing-xs);
}

.author-title {
  font-size: 0.85rem;
  color: #4a5568;
  margin-bottom: var(--spacing-sm);
}

.author-bio {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #2d3748;
}

.author-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.credential-badge {
  background: var(--color-primary);
  color: var(--color-text-light);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

/* --- 目次（Table of Contents） --- */
.toc {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.toc-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list li {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-md);
  border-left: 2px solid var(--color-border);
  transition: border-color var(--transition-fast);
}

.toc-list li:hover {
  border-left-color: var(--color-secondary);
}

.toc-list a {
  color: var(--color-text);
  font-size: 0.95rem;
}

.toc-list a:hover {
  color: var(--color-secondary);
  text-decoration: none;
}

.toc-list .toc-sub {
  margin-top: var(--spacing-sm);
  padding-left: var(--spacing-md);
}

/* --- 製品カード（PCおすすめ用） --- */
.product-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.product-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.product-card-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-accent);
  color: var(--color-text-light);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0 var(--radius-lg) 0 var(--radius-md);
}

.product-card-badge.consumable {
  background: var(--color-success);
}

.product-card-badge.asset {
  background: var(--color-warning);
  color: var(--color-text);
}

.product-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.product-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.product-card-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.product-card-price {
  text-align: right;
}

.price-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #e53935;
}

.price-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.product-card-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.spec-item {
  display: flex;
  flex-direction: column;
}

.spec-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.spec-value {
  font-weight: 600;
  color: var(--color-text);
}

.product-card-features {
  margin-top: var(--spacing-md);
}

.product-card-features ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.product-card-features li {
  margin-bottom: var(--spacing-xs);
  font-size: 0.9rem;
}

.product-card-cta {
  margin-top: var(--spacing-lg);
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* --- スペックバッジ --- */
.spec-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e3f2fd;
  color: var(--color-primary);
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
}

.spec-badge.highlight {
  background: var(--color-success);
  color: var(--color-text-light);
}

.spec-badge.warning {
  background: var(--color-warning);
  color: var(--color-text);
}

/* --- コンプライアンス警告ボックス --- */
.compliance-box {
  background: #fff3e0;
  border: 2px solid #ff9800;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.compliance-box-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e65100;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.compliance-box ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.compliance-box li {
  margin-bottom: var(--spacing-sm);
}

.compliance-box.danger {
  background: #ffebee;
  border-color: #f44336;
}

.compliance-box.danger .compliance-box-title {
  color: #c62828;
}

/* --- ステップガイド --- */
.step-guide {
  counter-reset: step-counter;
  margin: var(--spacing-lg) 0;
}

.step-item {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.step-item::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
  padding-top: var(--spacing-xs);
}

.step-content h4 {
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.step-content p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- 比較表（拡張版） --- */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  font-size: 0.9rem;
}

.comparison-table th {
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
}

.comparison-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table tbody tr:nth-child(even) {
  background: var(--color-bg);
}

.comparison-table .recommend {
  background: #e8f5e9 !important;
}

.comparison-table .check {
  color: var(--color-success);
  font-size: 1.2rem;
}

.comparison-table .cross {
  color: #e53935;
  font-size: 1.2rem;
}

/* --- レスポンシブ追加 --- */
@media (max-width: 768px) {
  .author-profile {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .author-credentials {
    justify-content: center;
  }

  .product-card-header {
    flex-direction: column;
  }

  .product-card-price {
    text-align: left;
    margin-top: var(--spacing-md);
  }

  .product-card-specs {
    grid-template-columns: 1fr 1fr;
  }

  .product-card-cta {
    flex-direction: column;
  }

  .product-card-cta .btn {
    width: 100%;
  }
}

/* ===================================================
   技術記事拡張コンポーネント (Raspberry Pi Signage等)
   =================================================== */

/* --- コードブロック --- */
.code-block {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  overflow-x: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  position: relative;
}

.code-block::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-secondary);
  color: var(--color-text-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 0 var(--radius-md) 0 var(--radius-sm);
  text-transform: uppercase;
}

.code-block code {
  display: block;
  white-space: pre;
}

.code-block .comment {
  color: #6c7086;
}

.code-block .keyword {
  color: #cba6f7;
}

.code-block .string {
  color: #a6e3a1;
}

.code-block .variable {
  color: #f38ba8;
}

/* --- 警告・注意ボックス --- */
.warning-box {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
  border: 2px solid #fc8181;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.warning-box::before {
  content: "⚠️ 重要な注意事項";
  display: block;
  font-weight: 700;
  color: #c53030;
  margin-bottom: var(--spacing-sm);
  font-size: 1.1rem;
}

.danger-box {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border: 2px solid #ef4444;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.danger-box::before {
  content: "🚨 危険";
  display: block;
  font-weight: 700;
  color: #dc2626;
  margin-bottom: var(--spacing-sm);
  font-size: 1.1rem;
}

/* --- 著者プロフィール (E-E-A-T) --- */
.author-profile {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-text-light);
  flex-shrink: 0;
}

.author-info h4 {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.author-title {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.author-bio {
  font-size: 0.9rem;
  line-height: 1.7;
}

.author-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.credential-tag {
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

/* --- 目次 (TOC) --- */
.toc-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.toc-box h3 {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-secondary);
}

.toc-box ol {
  list-style: none;
  counter-reset: toc-counter;
  padding: 0;
  margin: 0;
}

.toc-box>ol>li {
  counter-increment: toc-counter;
  margin-bottom: var(--spacing-sm);
}

.toc-box>ol>li>a::before {
  content: counter(toc-counter) ". ";
  font-weight: 700;
  color: var(--color-secondary);
}

.toc-box a {
  color: var(--color-text);
  text-decoration: none;
  display: block;
  padding: var(--spacing-xs) 0;
  transition: all var(--transition-fast);
}

.toc-box a:hover {
  color: var(--color-secondary);
  padding-left: var(--spacing-sm);
}

/* --- 比較表 --- */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.comparison-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
}

.comparison-table th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
}

.comparison-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table tbody tr:hover {
  background: #e3f2fd;
}

.comparison-table .feature-name {
  text-align: left;
  font-weight: 500;
}

.comparison-table .check {
  color: var(--color-success);
  font-size: 1.2rem;
}

.comparison-table .cross {
  color: #ef4444;
  font-size: 1.2rem;
}

.comparison-table .partial {
  color: var(--color-warning);
  font-size: 1.2rem;
}

/* --- ステップカード --- */
.step-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
  padding-left: calc(var(--spacing-lg) + 60px);
}

.step-number {
  position: absolute;
  left: var(--spacing-lg);
  top: var(--spacing-lg);
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  color: var(--color-text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}

.step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.step-content {
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- スペック表 --- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
}

.spec-table th {
  background: var(--color-bg);
  padding: var(--spacing-md);
  text-align: left;
  width: 30%;
  border: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-primary);
}

.spec-table td {
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
}

/* --- FAQ アコーディオン風 --- */
.faq-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.faq-question {
  background: var(--color-bg);
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.faq-question::before {
  content: "Q.";
  background: var(--color-secondary);
  color: var(--color-text-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.faq-answer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.faq-answer::before {
  content: "A.";
  display: inline-block;
  background: var(--color-success);
  color: var(--color-text-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-right: var(--spacing-sm);
  font-weight: 600;
}

/* --- コスト計算ボックス --- */
.cost-calculator {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.cost-calculator-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-success);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.cost-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border);
}

.cost-total {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-md) 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  border-top: 2px solid var(--color-success);
  margin-top: var(--spacing-sm);
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .author-profile {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .step-card {
    padding-left: var(--spacing-lg);
    padding-top: calc(var(--spacing-lg) + 50px);
  }

  .step-number {
    top: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
  }

  .code-block {
    font-size: 0.8rem;
    padding: var(--spacing-md);
  }
}

/* ===================================================
   デジタルサイネージ記事専用スタイル（2026年版）
   =================================================== */

/* --- 目次（TOC）スタイル --- */
.toc-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.toc-container::before {
  content: '📋';
  position: absolute;
  top: -15px;
  left: 20px;
  background: var(--color-bg);
  padding: 0 var(--spacing-sm);
  font-size: 1.5rem;
}

.toc-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--spacing-xl);
}

.toc-list li {
  margin-bottom: var(--spacing-sm);
  break-inside: avoid;
}

.toc-list a {
  color: var(--color-text);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid transparent;
  transition: all var(--transition-fast);
}

.toc-list a:hover {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
  text-decoration: none;
}

.toc-list a::before {
  content: '▸';
  color: var(--color-secondary);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .toc-list {
    columns: 1;
  }
}

/* --- 著者プロフィールボックス（E-E-A-T対応） --- */
.author-profile {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  border: 1px solid var(--color-border);
}

.author-avatar {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--color-text-light);
  flex-shrink: 0;
}

.author-info h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a365d;
  margin-bottom: var(--spacing-sm);
}

.author-info p {
  font-size: 0.9rem;
  color: #2d3748;
  line-height: 1.7;
  margin: 0;
}

.author-credentials {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  flex-wrap: wrap;
}

.author-credential {
  background: var(--color-primary);
  color: var(--color-text-light);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

@media (max-width: 768px) {
  .author-profile {
    flex-direction: column;
    text-align: center;
  }
}

/* --- コスト比較テーブル（価格マトリクス） --- */
.cost-matrix {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  font-size: 0.9rem;
}

.cost-matrix thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
}

.cost-matrix th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
}

.cost-matrix td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.cost-matrix tbody tr:nth-child(odd) {
  background: #f8f9fa;
}

.cost-matrix tbody tr:hover {
  background: #e3f2fd;
}

.cost-matrix .plan-diy {
  background: #e8f5e9 !important;
}

.cost-matrix .plan-standard {
  background: #fff8e1 !important;
}

.cost-matrix .plan-premium {
  background: #fce4ec !important;
}

.cost-matrix .price-cell {
  font-weight: 700;
  color: var(--color-primary);
}

.cost-matrix .total-row {
  background: var(--color-primary) !important;
  color: var(--color-text-light);
  font-weight: 700;
}

/* --- 業界別タブナビゲーション --- */
.industry-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--spacing-sm);
}

.industry-tab {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  cursor: pointer;
  font-weight: 500;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.industry-tab:hover {
  background: #e3f2fd;
  border-color: var(--color-secondary);
}

.industry-tab.active {
  background: var(--color-secondary);
  color: var(--color-text-light);
  border-color: var(--color-secondary);
}

.industry-content {
  display: none;
  padding: var(--spacing-lg);
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
}

.industry-content.active {
  display: block;
}

/* --- 失敗パターンカード --- */
.failure-card {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
  border: 2px solid #f5c6cb;
  border-left: 5px solid #dc3545;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.failure-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.failure-card-icon {
  width: 50px;
  height: 50px;
  background: #dc3545;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.failure-card-title {
  font-weight: 700;
  color: #dc3545;
  font-size: 1.1rem;
}

.failure-card-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.failure-card-content {
  font-size: 0.95rem;
  line-height: 1.8;
}

.failure-card-solution {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.failure-card-solution::before {
  content: '✅ 解決策：';
  font-weight: 700;
  color: #28a745;
}

/* --- 技術仕様ボックス --- */
.tech-spec-box {
  background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
  border: 2px solid #7986cb;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.tech-spec-title {
  font-weight: 700;
  color: #3f51b5;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.tech-spec-title::before {
  content: '⚙️';
  font-size: 1.2rem;
}

.tech-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.tech-spec-item {
  background: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  text-align: center;
}

.tech-spec-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3f51b5;
}

.tech-spec-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* --- FAQアコーディオン --- */
.faq-container {
  margin: var(--spacing-xl) 0;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}

.faq-question {
  background: var(--color-bg);
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: background var(--transition-fast);
}

.faq-question:hover {
  background: #e3f2fd;
}

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--color-secondary);
  transition: transform var(--transition-fast);
}

.faq-item.active .faq-question::after {
  content: '−';
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--color-bg-card);
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

.faq-answer-content {
  padding: var(--spacing-lg);
  line-height: 1.8;
}

/* --- 市場データチャート風ボックス --- */
.market-data-box {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  color: var(--color-text-light);
}

.market-data-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.market-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-lg);
}

.market-data-item {
  text-align: center;
}

.market-data-value {
  font-size: 2rem;
  font-weight: 700;
  color: #4fc3f7;
  margin-bottom: var(--spacing-xs);
}

.market-data-label {
  font-size: 0.85rem;
  opacity: 0.8;
}

.market-data-trend {
  font-size: 0.75rem;
  color: #81c784;
  margin-top: var(--spacing-xs);
}

.market-data-trend.down {
  color: #e57373;
}

/* --- 比較ハイライト --- */
.comparison-highlight {
  display: flex;
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.comparison-item {
  flex: 1;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  text-align: center;
}

.comparison-item.pros {
  background: #e8f5e9;
  border: 2px solid #81c784;
}

.comparison-item.cons {
  background: #ffebee;
  border: 2px solid #e57373;
}

.comparison-item h4 {
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.comparison-item.pros h4 {
  color: #388e3c;
}

.comparison-item.cons h4 {
  color: #d32f2f;
}

@media (max-width: 768px) {
  .comparison-highlight {
    flex-direction: column;
  }
}

/* --- 計算式ボックス --- */
.formula-box {
  background: #263238;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  color: #b0bec5;
  font-family: 'Courier New', monospace;
  text-align: center;
}

.formula-box .formula {
  font-size: 1.25rem;
  color: #4fc3f7;
  margin: var(--spacing-md) 0;
}

.formula-box .example {
  font-size: 0.9rem;
  color: #81c784;
}

/* --- 導入事例カード --- */
.case-study-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--spacing-lg) 0;
}

.case-study-header {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.case-study-header .industry-icon {
  font-size: 2rem;
}

.case-study-header h4 {
  margin: 0;
  font-size: 1.1rem;
}

.case-study-body {
  padding: var(--spacing-lg);
}

.case-study-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.case-study-metric {
  text-align: center;
}

.case-study-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-success);
}

.case-study-metric-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* --- 注意喚起バナー --- */
.caution-banner {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  margin: var(--spacing-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.caution-banner::before {
  content: '⚠️';
  font-size: 2rem;
  flex-shrink: 0;
}

.caution-banner strong {
  display: block;
  margin-bottom: var(--spacing-xs);
}

/* ===================================================
   ワークステーションコーヒー記事用コンポーネント
   =================================================== */

/* --- 脳波別豆選定マトリクス --- */
.brainwave-matrix {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.brainwave-matrix thead {
  background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%);
  color: var(--color-text-light);
}

.brainwave-matrix th,
.brainwave-matrix td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.brainwave-matrix tbody tr:nth-child(even) {
  background: #f3e5f5;
}

.brainwave-matrix tbody tr:hover {
  background: #e1bee7;
}

.wave-alpha {
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.wave-beta {
  background: linear-gradient(90deg, #ff5722, #ff9800);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* --- カフェインプロトコルタイムライン --- */
.caffeine-protocol {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  border: 2px solid var(--color-border);
}

.caffeine-protocol-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.protocol-timeline {
  display: grid;
  gap: var(--spacing-md);
}

.protocol-slot {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.protocol-slot.forbidden {
  background: #ffebee;
  border-left: 4px solid #f44336;
}

.protocol-slot.optimal {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
}

.protocol-slot.caution {
  background: #fff8e1;
  border-left: 4px solid #ffc107;
}

.protocol-time {
  font-weight: 700;
  color: var(--color-primary);
}

.protocol-action {
  font-size: 0.95rem;
}

.protocol-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-forbidden {
  background: #f44336;
  color: white;
}

.status-optimal {
  background: #4caf50;
  color: white;
}

.status-caution {
  background: #ffc107;
  color: #333;
}

/* --- 騒音レベル比較表 --- */
.noise-level-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.noise-level-table thead {
  background: #37474f;
  color: var(--color-text-light);
}

.noise-level-table th,
.noise-level-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.noise-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  min-width: 100px;
}

.noise-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.noise-bar-fill.level-low {
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  width: 30%;
}

.noise-bar-fill.level-medium {
  background: linear-gradient(90deg, #ffc107, #ff9800);
  width: 60%;
}

.noise-bar-fill.level-high {
  background: linear-gradient(90deg, #ff5722, #f44336);
  width: 90%;
}

.compatibility-icon {
  font-size: 1.2rem;
  text-align: center;
}

/* --- プロトコルカード（職種別推奨セット） --- */
.protocol-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.protocol-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.protocol-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.protocol-card-header {
  padding: var(--spacing-lg);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.protocol-card-header.coder {
  background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
}

.protocol-card-header.creative {
  background: linear-gradient(135deg, #880e4f 0%, #c2185b 100%);
}

.protocol-card-icon {
  font-size: 2.5rem;
}

.protocol-card-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.protocol-card-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
}

.protocol-card-body {
  padding: var(--spacing-lg);
}

.protocol-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

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

.protocol-item-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.protocol-item-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.protocol-item-value {
  font-weight: 600;
  color: var(--color-text);
}

/* --- スピルプルーフ警告ボックス --- */
.spill-warning {
  background: linear-gradient(135deg, #b71c1c 0%, #d32f2f 100%);
  color: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.spill-warning-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.spill-warning-content h4 {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-sm);
}

.spill-warning-content p {
  opacity: 0.95;
  line-height: 1.7;
}

/* --- ゾーニング図解 --- */
.zoning-diagram {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.zoning-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.zoning-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.zone {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  text-align: center;
}

.zone.electronics {
  background: #ffebee;
  border: 2px dashed #f44336;
}

.zone.interaction {
  background: #fff3e0;
  border: 2px dashed #ff9800;
}

.zone.hydration {
  background: #e8f5e9;
  border: 2px dashed #4caf50;
}

.zone-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.zone-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.zone-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* --- 科学ボックス --- */
.science-box {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-left: 5px solid #1976d2;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.science-box-title {
  font-weight: 700;
  color: #1565c0;
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.science-box-title::before {
  content: '🔬';
}

/* --- 製品推奨カード --- */
.product-recommend {
  background: var(--color-bg-card);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
}

.product-recommend::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: -10px;
  left: var(--spacing-lg);
  background: var(--color-success);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 10px;
}

.product-recommend-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-sm);
}

.product-recommend-spec {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* --- レスポンシブ対応追加 --- */
@media (max-width: 768px) {
  .protocol-slot {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .zoning-zones {
    grid-template-columns: 1fr;
  }

  .protocol-cards {
    grid-template-columns: 1fr;
  }

  .spill-warning {
    flex-direction: column;
    text-align: center;
  }
}

/* ===================================================
   研究用GPU PC記事用スタイル
   =================================================== */

/* --- GPU推奨バッジ --- */
.gpu-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: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.gpu-badge--entry {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  color: white;
}

.gpu-badge--standard {
  background: linear-gradient(135deg, #2196f3, #42a5f5);
  color: white;
}

.gpu-badge--highend {
  background: linear-gradient(135deg, #9c27b0, #ab47bc);
  color: white;
}

.gpu-badge--pro {
  background: linear-gradient(135deg, #ff9800, #ffb74d);
  color: white;
}

.gpu-badge--used {
  background: linear-gradient(135deg, #607d8b, #78909c);
  color: white;
}

/* --- VRAMコスパマップ --- */
.vram-map {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.vram-map-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.vram-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.vram-card {
  background: linear-gradient(135deg, var(--color-bg) 0%, #e3f2fd 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.vram-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.vram-card-model {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.vram-card-vram {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary);
}

.vram-card-price {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.vram-card-cospa {
  background: var(--color-success);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: var(--spacing-sm);
  display: inline-block;
}

/* --- 損益分岐点ボックス --- */
.breakeven-box {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.breakeven-box-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.breakeven-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.breakeven-option {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
}

.breakeven-option-title {
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.breakeven-option-cost {
  font-size: 1.75rem;
  font-weight: 700;
  color: #64b5f6;
}

.breakeven-vs {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

.breakeven-result {
  background: rgba(76, 175, 80, 0.2);
  border: 2px solid #4caf50;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-lg);
  text-align: center;
}

.breakeven-result-value {
  font-size: 2rem;
  font-weight: 700;
  color: #81c784;
}

/* --- スティッキー目次 --- */
.toc-sticky {
  position: sticky;
  top: 80px;
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.toc-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-list li {
  margin-bottom: var(--spacing-sm);
}

.toc-list a {
  color: var(--color-text);
  font-size: 0.9rem;
  display: block;
  padding: var(--spacing-xs) 0;
  border-left: 3px solid transparent;
  padding-left: var(--spacing-sm);
  transition: all var(--transition-fast);
}

.toc-list a:hover {
  color: var(--color-secondary);
  border-left-color: var(--color-secondary);
  text-decoration: none;
}

.toc-list .toc-h3 {
  padding-left: var(--spacing-lg);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- 構成パターンカード --- */
.config-pattern {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
  overflow: hidden;
}

.config-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.config-pattern-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.config-pattern-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.config-pattern-price {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.config-pattern-target {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.config-pattern-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.config-spec-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.config-spec-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  min-width: 60px;
}

.config-spec-value {
  font-weight: 600;
  color: var(--color-text);
}

/* --- 科研費対応バッジ --- */
.kakenhi-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background: linear-gradient(135deg, #1565c0, #1976d2);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
}

.kakenhi-badge::before {
  content: '🏛️';
}

/* --- WSL2/Linux環境ボックス --- */
.env-comparison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.env-option {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.env-option--recommended {
  border-color: var(--color-success);
  position: relative;
}

.env-option--recommended::before {
  content: 'おすすめ';
  position: absolute;
  top: -10px;
  left: var(--spacing-md);
  background: var(--color-success);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}

.env-option-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.env-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.env-pros,
.env-cons {
  font-size: 0.85rem;
}

.env-pros li::before {
  content: '✓ ';
  color: var(--color-success);
  font-weight: 700;
}

.env-cons li::before {
  content: '✗ ';
  color: #f44336;
  font-weight: 700;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .breakeven-comparison {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .breakeven-vs {
    transform: rotate(90deg);
    margin: var(--spacing-md) 0;
  }

  .config-pattern-specs {
    grid-template-columns: 1fr;
  }

  .env-comparison {
    grid-template-columns: 1fr;
  }

  .vram-map-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   Windows vs Mac 研究者記事 専用スタイル
   =================================================== */

/* --- OS判定フローチャート --- */
.os-flowchart {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  border: 2px solid var(--color-border);
}

.flowchart-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.flowchart-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 600px;
  margin: 0 auto;
}

.flowchart-step {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  border-left: 4px solid var(--color-secondary);
  box-shadow: var(--shadow-sm);
}

.flowchart-step-question {
  flex: 1;
  font-weight: 500;
}

.flowchart-step-answer {
  display: flex;
  gap: var(--spacing-sm);
}

.flowchart-btn {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.flowchart-btn--yes {
  background: var(--color-success);
  color: white;
}

.flowchart-btn--no {
  background: #6c757d;
  color: white;
}

.flowchart-result {
  text-align: center;
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-md);
  font-weight: 700;
  font-size: 1.2rem;
}

.flowchart-result--windows {
  background: linear-gradient(135deg, #0078d4, #005a9e);
  color: white;
}

.flowchart-result--mac {
  background: linear-gradient(135deg, #333, #555);
  color: white;
}

.flowchart-result--both {
  background: linear-gradient(135deg, var(--color-success), #20c997);
  color: white;
}

/* --- 分野別推奨マトリクス強化版 --- */
.os-matrix {
  overflow-x: auto;
  margin: var(--spacing-lg) 0;
}

.os-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.os-matrix thead {
  background: var(--color-primary);
  color: white;
}

.os-matrix th,
.os-matrix td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.os-matrix tbody tr:nth-child(even) {
  background: var(--color-bg);
}

.os-matrix tbody tr:hover {
  background: #e3f2fd;
}

.os-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}

.os-badge--windows {
  background: #0078d4;
  color: white;
}

.os-badge--mac {
  background: #333;
  color: white;
}

.os-badge--both {
  background: var(--color-success);
  color: white;
}

.os-badge--linux {
  background: #dd4814;
  color: white;
}

.risk-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
}

.risk-indicator--high {
  color: #dc3545;
}

.risk-indicator--medium {
  color: #ffc107;
}

.risk-indicator--low {
  color: var(--color-success);
}

/* --- 技術警告ボックス（Appleシリコン互換性） --- */
.tech-warning-box {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
  border: 2px solid #dc3545;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.tech-warning-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  color: #dc3545;
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

.tech-warning-content {
  font-size: 0.95rem;
  line-height: 1.8;
}

.tech-warning-content code {
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  color: #c7254e;
}

/* --- 互換性比較ボックス --- */
.compatibility-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.compatibility-box {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  border: 2px solid var(--color-border);
}

.compatibility-box--windows {
  border-top: 4px solid #0078d4;
}

.compatibility-box--mac {
  border-top: 4px solid #333;
}

.compatibility-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

.compatibility-list {
  list-style: none;
  padding: 0;
}

.compatibility-list li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.compatibility-list li:last-child {
  border-bottom: none;
}

.compat-status {
  font-size: 1rem;
}

.compat-status--ok::before {
  content: '✅';
}

.compat-status--warning::before {
  content: '⚠️';
}

.compat-status--ng::before {
  content: '❌';
}

/* --- リセールバリュー比較 --- */
.resale-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-lg);
  align-items: center;
  margin: var(--spacing-xl) 0;
}

.resale-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.resale-card--mac {
  border-top: 4px solid var(--color-success);
}

.resale-card--windows {
  border-top: 4px solid #6c757d;
}

.resale-device {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-sm);
}

.resale-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.resale-original {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
  margin-bottom: var(--spacing-sm);
}

.resale-percentage {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: var(--spacing-sm);
}

.resale-percentage--high {
  background: #e8f5e9;
  color: var(--color-success);
}

.resale-percentage--low {
  background: #f5f5f5;
  color: #6c757d;
}

.resale-vs {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* --- TCO（総所有コスト）チャート --- */
.tco-breakdown {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-sm);
}

.tco-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
}

.tco-bar-container {
  margin: var(--spacing-md) 0;
}

.tco-bar-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
  font-size: 0.9rem;
}

.tco-bar {
  height: 30px;
  border-radius: 15px;
  background: var(--color-bg);
  overflow: hidden;
  position: relative;
}

.tco-bar-fill {
  height: 100%;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--spacing-md);
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
}

.tco-bar-fill--mac {
  background: linear-gradient(90deg, #333, #555);
}

.tco-bar-fill--windows {
  background: linear-gradient(90deg, #0078d4, #005a9e);
}

/* --- 就活・キャリアセクション --- */
.career-impact-box {
  background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);
  border: 2px solid var(--color-info);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.career-stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.career-stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  min-width: 100px;
  text-align: center;
}

.career-stat-desc {
  font-size: 1rem;
  line-height: 1.6;
}

/* --- 購入前チェックリスト --- */
.purchase-checklist {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  border: 2px solid var(--color-success);
}

.purchase-checklist-title {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-success);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.purchase-checklist-items {
  list-style: none;
  padding: 0;
}

.purchase-checklist-items li {
  padding: var(--spacing-sm) 0;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  border-bottom: 1px dashed var(--color-border);
}

.purchase-checklist-items li:last-child {
  border-bottom: none;
}

.checklist-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- ソフトウェア互換性カード --- */
.software-compat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.software-compat-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.software-compat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.software-name {
  font-weight: 700;
  font-size: 1rem;
}

.software-category {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 2px 8px;
  border-radius: 10px;
}

.software-support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  font-size: 0.85rem;
}

.software-support-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .compatibility-grid {
    grid-template-columns: 1fr;
  }

  .resale-comparison {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .resale-vs {
    transform: rotate(90deg);
    margin: var(--spacing-md) 0;
  }

  .career-stat {
    flex-direction: column;
    text-align: center;
  }

  .os-matrix {
    font-size: 0.8rem;
  }

  .flowchart-step {
    flex-direction: column;
    text-align: center;
  }

  .flowchart-step-answer {
    justify-content: center;
  }
}

/* ===================================================
   科研費MacBook購入記事専用スタイル（2026年版）
   =================================================== */

/* --- 購入フローチャート --- */
.purchase-flow {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.purchase-flow-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.flow-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--color-bg-card);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.flow-step::after {
  content: '↓';
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-secondary);
  font-size: 1.2rem;
  font-weight: 700;
}

.flow-step:last-child::after {
  display: none;
}

.flow-step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.flow-step-content h4 {
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.flow-step-content p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- 購入理由書テンプレートボックス --- */
.reason-template-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
  overflow: hidden;
}

.reason-template-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.reason-template-body {
  padding: var(--spacing-lg);
  background: #fafafa;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9rem;
  line-height: 1.8;
  white-space: pre-wrap;
}

.reason-template-field {
  display: flex;
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px dotted var(--color-border);
  padding-bottom: var(--spacing-sm);
}

.reason-template-label {
  font-weight: 700;
  width: 100px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.reason-template-value {
  flex: 1;
}

.reason-template-note {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  font-size: 0.85rem;
  font-family: var(--font-main);
}

/* --- 購入先比較カード --- */
.vendor-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.vendor-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.vendor-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.vendor-card.recommended {
  border-color: var(--color-success);
  position: relative;
}

.vendor-card.recommended::before {
  content: '✓ おすすめ';
  position: absolute;
  top: 12px;
  right: -30px;
  background: var(--color-success);
  color: var(--color-text-light);
  padding: var(--spacing-xs) var(--spacing-xl);
  font-size: 0.75rem;
  font-weight: 700;
  transform: rotate(45deg);
}

.vendor-card.warning {
  border-color: #ff9800;
}

.vendor-card-header {
  background: var(--color-bg);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.vendor-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.vendor-card-body {
  padding: var(--spacing-lg);
}

.vendor-pros,
.vendor-cons {
  margin-bottom: var(--spacing-md);
}

.vendor-pros h5,
.vendor-cons h5 {
  font-size: 0.85rem;
  margin-bottom: var(--spacing-sm);
}

.vendor-pros h5 {
  color: var(--color-success);
}

.vendor-cons h5 {
  color: #e53935;
}

.vendor-pros ul,
.vendor-cons ul {
  margin: 0;
  padding-left: var(--spacing-lg);
  font-size: 0.9rem;
}

.vendor-risk-level {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
}

.vendor-risk-level.low {
  background: #e8f5e9;
  color: var(--color-success);
}

.vendor-risk-level.medium {
  background: #fff8e1;
  color: #f57c00;
}

.vendor-risk-level.high {
  background: #ffebee;
  color: #c62828;
}

/* --- 地雷警告ボックス --- */
.mine-warning-box {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border: 3px solid #ef4444;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.mine-warning-box::before {
  content: '💣';
  position: absolute;
  top: -20px;
  left: 20px;
  font-size: 2rem;
  background: var(--color-bg);
  padding: 0 var(--spacing-sm);
}

.mine-warning-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #c62828;
  margin-bottom: var(--spacing-md);
}

.mine-item {
  background: var(--color-bg-card);
  border-left: 4px solid #ef4444;
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.mine-item:last-child {
  margin-bottom: 0;
}

.mine-item-title {
  font-weight: 700;
  color: #c62828;
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.mine-item-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* --- 資産区分インジケーター --- */
.asset-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
}

.asset-indicator.consumable {
  background: #e8f5e9;
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.asset-indicator.fixed-asset {
  background: #fff8e1;
  color: #f57c00;
  border: 1px solid #f57c00;
}

.asset-threshold-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2px solid var(--color-info);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  text-align: center;
}

.asset-threshold-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.asset-threshold-label {
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* --- 免責事項ボックス --- */
.disclaimer-box {
  background: #f5f5f5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.disclaimer-box::before {
  content: '⚠️ 免責事項：';
  font-weight: 700;
  color: var(--color-text);
}

/* --- レスポンシブ対応（科研費Mac記事） --- */
@media (max-width: 768px) {
  .purchase-flow {
    padding: var(--spacing-lg);
  }

  .flow-step {
    flex-direction: column;
    text-align: center;
  }

  .flow-step::after {
    position: static;
    transform: none;
    margin-top: var(--spacing-sm);
  }

  .vendor-comparison-grid {
    grid-template-columns: 1fr;
  }

  .reason-template-field {
    flex-direction: column;
  }

  .reason-template-label {
    width: 100%;
    margin-bottom: var(--spacing-xs);
  }
}

/* ===================================================
   Minisforum Lab - 技術検証ラボ専用コンポーネント
   =================================================== */

/* --- ベンチマークチャート --- */
.benchmark-chart {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
}

.benchmark-chart-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-lg);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.benchmark-chart-title::before {
  content: '📊';
}

.benchmark-item {
  margin-bottom: var(--spacing-md);
}

.benchmark-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
  font-size: 0.9rem;
}

.benchmark-model {
  font-weight: 600;
  color: var(--color-text);
}

.benchmark-score {
  font-weight: 700;
  color: var(--color-primary);
}

.benchmark-bar {
  height: 24px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.benchmark-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  transition: width 1s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--spacing-sm);
}

.benchmark-fill--highlight {
  background: linear-gradient(90deg, var(--color-success), #4caf50);
}

.benchmark-fill--low {
  background: linear-gradient(90deg, #ff9800, #ffc107);
}

/* --- ラボ検証結果ボックス --- */
.lab-verdict-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
}

.lab-verdict-box::before {
  content: '🔬 LAB検証';
  position: absolute;
  top: -12px;
  left: var(--spacing-md);
  background: var(--color-bg-card);
  padding: 0 var(--spacing-sm);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-primary);
}

.lab-verdict--positive {
  border-color: var(--color-success);
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}

.lab-verdict--positive::before {
  color: var(--color-success);
}

.lab-verdict--negative {
  border-color: #f44336;
  background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%);
}

.lab-verdict--negative::before {
  color: #f44336;
}

.lab-verdict--neutral {
  border-color: var(--color-warning);
  background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
}

.lab-verdict-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.lab-verdict-content {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* --- 製品スペックカード --- */
.spec-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.spec-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.spec-card--recommended {
  border-color: var(--color-success);
  position: relative;
}

.spec-card--recommended::before {
  content: '🏆 ラボ推奨';
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: var(--color-success);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 1;
}

.spec-card-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  padding: var(--spacing-lg);
}

.spec-card-model {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.spec-card-tagline {
  font-size: 0.9rem;
  opacity: 0.9;
}

.spec-card-body {
  padding: var(--spacing-lg);
}

.spec-card-price {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.spec-card-price-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.spec-card-price-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.spec-list {
  list-style: none;
}

.spec-list li {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.spec-list li:last-child {
  border-bottom: none;
}

.spec-label {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.spec-value {
  font-weight: 600;
  color: var(--color-text);
}

.spec-highlight {
  background: linear-gradient(90deg, transparent, #e3f2fd);
  padding: var(--spacing-sm);
  margin: 0 calc(-1 * var(--spacing-sm));
  border-radius: var(--radius-sm);
}

/* --- ユーザーペルソナカード --- */
.persona-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.persona-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all var(--transition-normal);
}

.persona-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

.persona-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  display: block;
}

.persona-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.persona-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.persona-needs {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  text-align: left;
}

.persona-needs-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
}

.persona-needs ul {
  font-size: 0.85rem;
  padding-left: var(--spacing-md);
}

.persona-recommend {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
}

/* --- 騒音レベルメーター --- */
.noise-meter {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-sm);
}

.noise-meter-title {
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.noise-meter-title::before {
  content: '🔊';
}

.noise-scale {
  display: flex;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.noise-scale-segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

.noise-scale-segment--quiet {
  background: var(--color-success);
}

.noise-scale-segment--moderate {
  background: #ffc107;
  color: #333;
}

.noise-scale-segment--loud {
  background: #ff9800;
}

.noise-scale-segment--very-loud {
  background: #f44336;
}

.noise-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.noise-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.noise-item-label {
  width: 150px;
  font-size: 0.9rem;
  font-weight: 500;
}

.noise-item-bar {
  flex: 1;
  height: 20px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.noise-item-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.5s ease;
}

.noise-item-value {
  width: 60px;
  text-align: right;
  font-weight: 600;
  font-size: 0.9rem;
}

/* --- 購入ルート比較カード --- */
.purchase-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.purchase-route-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  position: relative;
}

.purchase-route-card--recommended {
  border-color: var(--color-success);
}

.purchase-route-card--recommended::before {
  content: '✓ おすすめ';
  position: absolute;
  top: -10px;
  left: var(--spacing-md);
  background: var(--color-success);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}

.purchase-route-card--caution {
  border-color: var(--color-warning);
}

.purchase-route-card--caution::before {
  content: '⚠ 注意';
  position: absolute;
  top: -10px;
  left: var(--spacing-md);
  background: var(--color-warning);
  color: #333;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}

.purchase-route-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.purchase-route-features {
  list-style: none;
  margin-bottom: var(--spacing-md);
}

.purchase-route-features li {
  padding: var(--spacing-xs) 0;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.purchase-route-features li::before {
  content: '•';
  color: var(--color-secondary);
  font-weight: 700;
}

.purchase-route-pros,
.purchase-route-cons {
  font-size: 0.85rem;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.purchase-route-pros {
  background: #e8f5e9;
}

.purchase-route-cons {
  background: #ffebee;
}

/* --- ネガティブ評判対応ボックス --- */
.rumor-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--spacing-lg) 0;
  overflow: hidden;
}

.rumor-header {
  background: linear-gradient(90deg, #ffebee, #fce4ec);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.rumor-claim {
  font-weight: 700;
  color: #c62828;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.rumor-claim::before {
  content: '❓';
}

.rumor-body {
  padding: var(--spacing-lg);
}

.rumor-verdict {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
}

.rumor-verdict--true {
  background: #ffebee;
  color: #c62828;
}

.rumor-verdict--false {
  background: #e8f5e9;
  color: var(--color-success);
}

.rumor-verdict--partial {
  background: #fff8e1;
  color: #f57c00;
}

.rumor-explanation {
  font-size: 0.95rem;
  line-height: 1.8;
}

.rumor-solution {
  background: var(--color-bg);
  border-left: 4px solid var(--color-success);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.rumor-solution-title {
  font-weight: 700;
  color: var(--color-success);
  margin-bottom: var(--spacing-sm);
}

/* --- フローチャート（選び方） --- */
.flowchart {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-sm);
}

.flowchart-title {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.flowchart-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.flowchart-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
}

.flowchart-step--decision {
  background: #e3f2fd;
  border-color: var(--color-secondary);
}

.flowchart-step--result {
  background: #e8f5e9;
  border-color: var(--color-success);
}

.flowchart-step-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.flowchart-step-content {
  flex: 1;
}

.flowchart-step-question {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.flowchart-step-answer {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.flowchart-arrow {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1.2rem;
}

/* --- 競合比較表 --- */
.competitor-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-lg) 0;
}

.competitor-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
}

.competitor-table th {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: 600;
}

.competitor-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.competitor-table tbody tr:hover {
  background: #e3f2fd;
}

.competitor-table .highlight-cell {
  background: #e8f5e9;
  font-weight: 600;
}

/* --- 導入まとめボックス --- */
.intro-summary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-lg) 0;
  text-align: center;
}

.intro-summary-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.intro-summary-points {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
}

.intro-summary-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.intro-summary-point-icon {
  font-size: 2rem;
}

.intro-summary-point-text {
  font-weight: 600;
  font-size: 0.9rem;
}

/* --- レスポンシブ対応（Minisforum Lab） --- */
@media (max-width: 768px) {
  .persona-cards {
    grid-template-columns: 1fr;
  }

  .purchase-routes {
    grid-template-columns: 1fr;
  }

  .noise-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .noise-item-label {
    width: 100%;
    margin-bottom: var(--spacing-xs);
  }

  .noise-item-bar {
    width: 100%;
  }

  .intro-summary-points {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .spec-card-header {
    padding: var(--spacing-md);
  }

  .spec-card-model {
    font-size: 1.2rem;
  }

  .competitor-table {
    display: block;
    overflow-x: auto;
  }
}

/* ===================================================
   デュアルモニター執筆記事専用スタイル
   =================================================== */

/* --- 配置比較ビジュアル --- */
.layout-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.layout-option {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.layout-option:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.layout-option--recommended {
  border: 3px solid var(--color-success);
  position: relative;
}

.layout-option--recommended::before {
  content: "✓ 推奨";
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-success);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}

.layout-option--warning {
  border: 3px solid var(--color-warning);
}

.layout-visual {
  height: 180px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  position: relative;
}

.layout-visual--horizontal {
  flex-direction: row;
  gap: 8px;
}

.layout-visual--stacked {
  flex-direction: column;
  gap: 6px;
}

.layout-visual--portrait {
  flex-direction: row;
  gap: 12px;
}

.monitor-icon {
  background: linear-gradient(180deg, #3282b8 0%, #0f4c75 100%);
  border: 2px solid #4a9fd4;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
}

.monitor-icon--main {
  width: 80px;
  height: 50px;
}

.monitor-icon--sub {
  width: 60px;
  height: 38px;
  opacity: 0.8;
}

.monitor-icon--portrait {
  width: 35px;
  height: 60px;
}

.layout-content {
  padding: var(--spacing-lg);
}

.layout-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.layout-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.layout-pros,
.layout-cons {
  font-size: 0.85rem;
  margin-bottom: var(--spacing-sm);
}

.layout-pros {
  color: var(--color-success);
}

.layout-cons {
  color: #dc3545;
}

/* --- 人間工学警告ボックス --- */
.ergonomic-warning {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
  border: 2px solid #dc3545;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.ergonomic-warning::before {
  content: "⚠️ 人間工学的注意";
  display: block;
  font-weight: 700;
  color: #dc3545;
  font-size: 1rem;
  margin-bottom: var(--spacing-md);
}

.ergonomic-warning ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.ergonomic-warning li {
  margin-bottom: var(--spacing-sm);
  color: #6c1d1d;
}

/* --- 生産性データカード --- */
.productivity-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.productivity-stat-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  color: white;
  box-shadow: var(--shadow-md);
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--font-heading);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.stat-unit {
  font-size: 1.2rem;
  opacity: 0.9;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: var(--spacing-sm);
}

.stat-source {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: var(--spacing-sm);
}

/* --- 技術解説ボックス --- */
.tech-explainer {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  color: white;
}

.tech-explainer-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.tech-explainer-title::before {
  content: "🔧";
  font-size: 1.5rem;
}

.tech-explainer p {
  line-height: 1.8;
  opacity: 0.9;
  margin-bottom: var(--spacing-md);
}

.tech-explainer code {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

.tech-step-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0;
  counter-reset: tech-step;
}

.tech-step-list li {
  counter-increment: tech-step;
  padding-left: 40px;
  position: relative;
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

.tech-step-list li::before {
  content: counter(tech-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--color-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.tech-warning {
  background: rgba(255, 193, 7, 0.2);
  border-left: 4px solid var(--color-warning);
  padding: var(--spacing-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--spacing-lg);
}

.tech-warning-title {
  font-weight: 700;
  color: var(--color-warning);
  margin-bottom: var(--spacing-xs);
}

/* --- 職種別セットアップカード --- */
.setup-persona-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.setup-persona-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal);
}

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

.persona-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  padding: var(--spacing-lg);
  color: white;
}

.persona-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.persona-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.persona-subtitle {
  font-size: 0.85rem;
  opacity: 0.85;
}

.persona-content {
  padding: var(--spacing-lg);
}

.persona-need {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.persona-setup {
  margin-bottom: var(--spacing-md);
}

.persona-setup-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.persona-setup-list {
  font-size: 0.9rem;
  padding-left: var(--spacing-lg);
  margin: 0;
}

.persona-setup-list li {
  margin-bottom: var(--spacing-xs);
}

/* --- スティッキー目次 --- */
.sticky-toc {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.sticky-toc-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.sticky-toc-title::before {
  content: "📑";
}

.sticky-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-sm);
}

.sticky-toc-list li {
  margin: 0;
}

.sticky-toc-list a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.sticky-toc-list a:hover {
  background: var(--color-primary);
  color: white;
  text-decoration: none;
}

/* --- 選び方基準カード --- */
.criteria-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.criteria-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--color-secondary);
}

.criteria-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-secondary);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: var(--spacing-sm);
}

.criteria-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.criteria-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* --- FAQセクション --- */
.faq-section {
  margin: var(--spacing-xl) 0;
}

.faq-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.faq-question {
  font-weight: 700;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.faq-question::before {
  content: "Q";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.faq-answer {
  padding: var(--spacing-lg);
  line-height: 1.8;
}

.faq-answer::before {
  content: "A";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-success);
  color: white;
  border-radius: 50%;
  font-size: 0.85rem;
  margin-right: var(--spacing-sm);
  float: left;
}

/* ===================================================
   チューナーレステレビ記事用コンポーネント
   =================================================== */

/* --- 法的警告ボックス（割増金制度用） --- */
.legal-warning-box {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
  border: 2px solid #fc8181;
  border-left: 6px solid #e53e3e;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
}

.legal-warning-box::before {
  content: "⚠️";
  position: absolute;
  top: -12px;
  left: 20px;
  background: #fff5f5;
  padding: 0 8px;
  font-size: 1.5rem;
}

.legal-warning-box-title {
  color: #c53030;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

.legal-warning-box p,
.legal-warning-box ul {
  color: #742a2a;
  margin-bottom: var(--spacing-sm);
}

/* --- 法的安全ボックス（契約不要の根拠用） --- */
.legal-safe-box {
  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
  border: 2px solid #68d391;
  border-left: 6px solid #38a169;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
}

.legal-safe-box::before {
  content: "✅";
  position: absolute;
  top: -12px;
  left: 20px;
  background: #f0fff4;
  padding: 0 8px;
  font-size: 1.5rem;
}

.legal-safe-box-title {
  color: #276749;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

/* --- 経済シミュレーション表 --- */
.economic-calc-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-lg) 0;
}

.economic-calc-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
}

.economic-calc-table th {
  padding: var(--spacing-md);
  font-weight: 600;
  text-align: center;
  font-size: 0.9rem;
}

.economic-calc-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.economic-calc-table tbody tr:hover {
  background: #e3f2fd;
}

.economic-calc-table .positive {
  color: #38a169;
  font-weight: 700;
}

.economic-calc-table .negative {
  color: #e53e3e;
  font-weight: 700;
}

.economic-calc-table .breakeven {
  background: #fef9c3;
  font-weight: 700;
}

/* --- 節約ハイライト --- */
.savings-highlight {
  background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  margin: var(--spacing-xl) 0;
  position: relative;
  overflow: hidden;
}

.savings-highlight::before {
  content: "💰";
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 3rem;
  opacity: 0.3;
}

.savings-highlight-amount {
  font-size: 3rem;
  font-weight: 700;
  color: #92400e;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.savings-highlight-period {
  font-size: 1.2rem;
  color: #78350f;
  margin-bottom: var(--spacing-sm);
}

.savings-highlight-desc {
  font-size: 0.95rem;
  color: #92400e;
}

/* --- 製品比較カード --- */
.product-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.product-compare-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.product-compare-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.product-compare-card.recommended {
  border-color: #f59e0b;
  position: relative;
}

.product-compare-card.recommended::before {
  content: "👑 おすすめ";
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0 0 0 8px;
  z-index: 10;
}

.product-compare-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-compare-brand {
  font-size: 0.8rem;
  opacity: 0.9;
}

.product-compare-model {
  font-weight: 700;
  font-size: 1.1rem;
}

.product-compare-body {
  padding: var(--spacing-lg);
}

.product-compare-price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.product-compare-price small {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.product-compare-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md) 0;
}

.product-compare-specs li {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.9rem;
}

.product-compare-specs li:last-child {
  border-bottom: none;
}

.product-compare-specs .spec-label {
  color: var(--color-text-muted);
}

.product-compare-specs .spec-value {
  font-weight: 600;
  color: var(--color-text);
}

.product-compare-target {
  background: #f0f9ff;
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.85rem;
  color: var(--color-secondary);
  margin-top: var(--spacing-md);
}

/* --- ブランドタグ --- */
.brand-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.brand-tag--donki {
  background: #fef3c7;
  color: #92400e;
}

.brand-tag--nitori {
  background: #dbeafe;
  color: #1e40af;
}

.brand-tag--xiaomi {
  background: #fee2e2;
  color: #991b1b;
}

.brand-tag--sony {
  background: #e0e7ff;
  color: #3730a3;
}

.brand-tag--orion {
  background: #d1fae5;
  color: #065f46;
}

/* --- 解約手順フロー --- */
.step-flow {
  margin: var(--spacing-lg) 0;
}

.step-flow-item {
  display: flex;
  gap: var(--spacing-lg);
  position: relative;
  padding-bottom: var(--spacing-lg);
}

.step-flow-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 48px;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-border) 100%);
}

.step-flow-number {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  z-index: 1;
}

.step-flow-content {
  flex: 1;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.step-flow-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 1.1rem;
}

.step-flow-desc {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.7;
}

.step-flow-tip {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-md);
  font-size: 0.85rem;
  color: #92400e;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- メリット・デメリット比較グリッド --- */
.merit-demerit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.merit-box,
.demerit-box {
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.merit-box {
  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
  border: 2px solid #68d391;
}

.demerit-box {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
  border: 2px solid #fc8181;
}

.merit-box-title,
.demerit-box-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.merit-box-title {
  color: #276749;
}

.demerit-box-title {
  color: #c53030;
}

/* --- FAQ セクション（構造化データ対応） --- */
.faq-section {
  margin: var(--spacing-xl) 0;
}

.faq-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.faq-question {
  padding: var(--spacing-lg);
  background: #f8fafc;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.faq-question:hover {
  background: #e2e8f0;
}

.faq-question::before {
  content: "Q";
  background: var(--color-primary);
  color: white;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.faq-answer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--spacing-md);
  line-height: 1.8;
}

.faq-answer::before {
  content: "A";
  background: var(--color-success);
  color: white;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

/* --- 損益分岐点インジケーター --- */
.breakeven-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.breakeven-icon {
  font-size: 2.5rem;
}

.breakeven-content {
  flex: 1;
}

.breakeven-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.breakeven-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* --- トークスクリプト（電話対応用） --- */
.talk-script {
  background: #fefce8;
  border: 2px solid #fde047;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.talk-script-title {
  font-weight: 700;
  color: #854d0e;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.talk-script-content {
  background: white;
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  font-style: italic;
  color: #713f12;
  border-left: 4px solid #eab308;
  line-height: 1.8;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .merit-demerit-grid {
    grid-template-columns: 1fr;
  }

  .product-compare-grid {
    grid-template-columns: 1fr;
  }

  .savings-highlight-amount {
    font-size: 2rem;
  }

  .step-flow-item {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .step-flow-item:not(:last-child)::before {
    display: none;
  }

  .economic-calc-table {
    display: block;
    overflow-x: auto;
  }
}

/* ===================================================
   縦置きモニターPDF記事 専用スタイル
   =================================================== */

/* --- アスペクト比比較カード --- */
.aspect-ratio-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.aspect-ratio-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--color-border);
  transition: all var(--transition-normal);
}

.aspect-ratio-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.aspect-ratio-card--optimal {
  border-color: var(--color-success);
  background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
}

.aspect-ratio-card--optimal::before {
  content: "✓ 推奨";
  display: inline-block;
  background: var(--color-success);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: var(--spacing-sm);
}

.aspect-ratio-card--good {
  border-color: var(--color-info);
}

.aspect-ratio-card--poor {
  border-color: var(--color-warning);
}

.aspect-ratio-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.aspect-ratio-visual {
  height: 120px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-md) 0;
  position: relative;
  overflow: hidden;
}

.aspect-ratio-visual-inner {
  background: var(--color-primary);
  opacity: 0.8;
}

.aspect-ratio-visual--16-9 .aspect-ratio-visual-inner {
  width: 56px;
  height: 100px;
}

.aspect-ratio-visual--16-10 .aspect-ratio-visual-inner {
  width: 62px;
  height: 100px;
}

.aspect-ratio-visual--3-2 .aspect-ratio-visual-inner {
  width: 67px;
  height: 100px;
}

.aspect-ratio-stat {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.9rem;
}

.aspect-ratio-stat:last-child {
  border-bottom: none;
}

.aspect-ratio-stat-label {
  color: var(--color-text-muted);
}

.aspect-ratio-stat-value {
  font-weight: 600;
  color: var(--color-text);
}

/* --- PPI評価表（解像度・画素密度） --- */
.ppi-rating-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
}

.ppi-rating-table thead {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
}

.ppi-rating-table th,
.ppi-rating-table td {
  padding: var(--spacing-md);
  text-align: center;
  border: 1px solid var(--color-border);
}

.ppi-rating-table tbody tr:nth-child(even) {
  background: var(--color-bg);
}

.ppi-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.ppi-rating--excellent {
  background: linear-gradient(135deg, #ffd700, #ffec8b);
  color: #5d4e00;
}

.ppi-rating--good {
  background: #e8f5e9;
  color: var(--color-success);
}

.ppi-rating--fair {
  background: #fff8e1;
  color: #856404;
}

.ppi-rating--poor {
  background: #ffebee;
  color: #c62828;
}

/* --- 技術レベル別ボックス（ClearType解決策） --- */
.tech-level-box {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  margin: var(--spacing-lg) 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.tech-level-header {
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: white;
  font-weight: 700;
}

.tech-level-header--level1 {
  background: linear-gradient(135deg, #4caf50, #81c784);
}

.tech-level-header--level2 {
  background: linear-gradient(135deg, #ff9800, #ffb74d);
}

.tech-level-header--level3 {
  background: linear-gradient(135deg, #f44336, #e57373);
}

.tech-level-badge {
  background: rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
}

.tech-level-body {
  padding: var(--spacing-lg);
}

.tech-level-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tech-level-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.tech-level-steps li::before {
  content: counter(step);
  counter-increment: step;
  background: var(--color-primary);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.tech-level-body ol {
  counter-reset: step;
  list-style: none;
  padding: 0;
}

/* --- エルゴノミクス配置図解 --- */
.ergonomics-diagram {
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  text-align: center;
}

.ergonomics-diagram-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.ergonomics-visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.ergonomics-monitor {
  width: 80px;
  height: 140px;
  background: linear-gradient(180deg, #333 0%, #555 100%);
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ergonomics-monitor::after {
  content: "";
  width: 60px;
  height: 120px;
  background: linear-gradient(135deg, #4fc3f7, #81d4fa);
  border-radius: 2px;
}

.ergonomics-person {
  width: 40px;
  text-align: center;
}

.ergonomics-person-icon {
  font-size: 3rem;
}

.ergonomics-angle {
  position: absolute;
  top: -30px;
  right: -50px;
  background: var(--color-success);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
}

.ergonomics-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  text-align: left;
}

.ergonomics-rule {
  background: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-success);
}

.ergonomics-rule-title {
  font-weight: 700;
  color: var(--color-success);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-xs);
}

/* --- 危険警告ボックス --- */
.warning-box--danger {
  background: linear-gradient(135deg, #ffebee 0%, #fff 100%);
  border: 2px solid #ef5350;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.warning-box--danger .warning-box-title {
  color: #c62828;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.warning-box--danger .warning-box-title::before {
  content: "⚠️";
  font-size: 1.25rem;
}

/* --- ソフトウェア設定カード --- */
.software-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.software-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.software-card-header {
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.software-card-header--windows {
  background: linear-gradient(135deg, #0078d4, #00a4ef);
  color: white;
}

.software-card-header--mac {
  background: linear-gradient(135deg, #333, #555);
  color: white;
}

.software-card-header--pdf {
  background: linear-gradient(135deg, #ff0000, #cc0000);
  color: white;
}

.software-card-icon {
  font-size: 1.5rem;
}

.software-card-title {
  font-weight: 700;
}

.software-card-body {
  padding: var(--spacing-lg);
}

.software-tool {
  margin-bottom: var(--spacing-lg);
}

.software-tool:last-child {
  margin-bottom: 0;
}

.software-tool-name {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.software-tool-badge {
  background: var(--color-success);
  color: white;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
}

.software-tool-badge--paid {
  background: var(--color-warning);
  color: #333;
}

.software-steps {
  background: var(--color-bg);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.software-steps ol {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.software-steps li {
  margin-bottom: var(--spacing-xs);
}

/* --- 構成パターン比較 --- */
.config-patterns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.config-pattern {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.config-pattern:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.config-pattern-visual {
  height: 100px;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

.config-monitor {
  background: #333;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.config-monitor--horizontal {
  width: 60px;
  height: 35px;
}

.config-monitor--vertical {
  width: 35px;
  height: 60px;
}

.config-monitor-inner {
  background: linear-gradient(135deg, #4fc3f7, #81d4fa);
  border-radius: 2px;
}

.config-monitor--horizontal .config-monitor-inner {
  width: 54px;
  height: 30px;
}

.config-monitor--vertical .config-monitor-inner {
  width: 30px;
  height: 54px;
}

.config-pattern-content {
  padding: var(--spacing-lg);
}

.config-pattern-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.config-pattern-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.config-pattern-usecases {
  list-style: none;
  padding: 0;
  margin: 0;
}

.config-pattern-usecases li {
  padding: var(--spacing-xs) 0;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.config-pattern-usecases li::before {
  content: "✓";
  color: var(--color-success);
  font-weight: 700;
}

/* --- 数学的証明ボックス --- */
.math-proof-box {
  background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
  border: 2px solid var(--color-info);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.math-proof-title {
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}


.math-proof-title::before {
  content: "📐";
}

.math-formula {
  background: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  text-align: center;
  font-size: 1.1rem;
  margin: var(--spacing-md) 0;
  border: 1px dashed var(--color-border);
}

/* --- レスポンシブ（縦置きモニター記事） --- */
@media (max-width: 768px) {
  .aspect-ratio-comparison {
    grid-template-columns: 1fr;
  }

  .software-guide {
    grid-template-columns: 1fr;
  }

  .config-patterns {
    grid-template-columns: 1fr;
  }

  .ergonomics-visual {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .ergonomics-rules {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   USB-Cモニター記事専用スタイル（2026年版）
   =================================================== */

/* --- ケーブル接続図解 --- */
.usbc-cable-diagram {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  text-align: center;
}

.usbc-cable-diagram-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.usbc-cable-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  margin: var(--spacing-lg) 0;
}

.usbc-device-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  min-width: 150px;
  text-align: center;
}

.usbc-device-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
}

.usbc-device-label {
  font-weight: 600;
  color: var(--color-text);
}

.usbc-cable-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.usbc-cable-line-graphic {
  width: 100px;
  height: 8px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
  border-radius: 4px;
  position: relative;
}

.usbc-signal-badges {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.usbc-signal-badge {
  background: var(--color-secondary);
  color: var(--color-text-light);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
}

.usbc-signal-badge.video {
  background: #9c27b0;
}

.usbc-signal-badge.power {
  background: #f44336;
}

.usbc-signal-badge.data {
  background: #4caf50;
}

/* --- ロゴマーク識別ガイド --- */
.usbc-logo-guide {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.usbc-logo-guide-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.usbc-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.usbc-logo-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  transition: all var(--transition-normal);
}

.usbc-logo-item:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

.usbc-logo-item.recommended {
  border-color: var(--color-success);
  background: #e8f5e9;
}

.usbc-logo-symbol {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.usbc-logo-name {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.usbc-logo-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.usbc-logo-verdict {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.usbc-logo-verdict.ok {
  background: var(--color-success);
  color: var(--color-text-light);
}

.usbc-logo-verdict.ng {
  background: #ef4444;
  color: var(--color-text-light);
}

.usbc-logo-verdict.check {
  background: var(--color-warning);
  color: var(--color-text);
}

/* --- ワット数早見表 --- */
.usbc-wattage-table {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.usbc-wattage-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.usbc-wattage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
}

.usbc-wattage-item {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  border-left: 4px solid var(--color-secondary);
}

.usbc-wattage-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.usbc-wattage-unit {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.usbc-wattage-devices {
  font-size: 0.85rem;
  color: var(--color-text);
  margin-top: var(--spacing-sm);
}

/* --- トラブルシュートフローチャート --- */
.usbc-troubleshoot-flow {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  border: 2px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.usbc-troubleshoot-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f57c00;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.usbc-flow-step {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
}

.usbc-flow-number {
  width: 32px;
  height: 32px;
  background: var(--color-warning);
  color: var(--color-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.usbc-flow-content {
  flex: 1;
}

.usbc-flow-question {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.usbc-flow-answer {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.usbc-flow-result {
  background: var(--color-success);
  color: var(--color-text-light);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
}

.usbc-flow-result.error {
  background: #ef4444;
}

/* --- モニターおすすめカード --- */
.monitor-recommend-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.monitor-recommend-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.monitor-recommend-card.editor-pick {
  border-color: #9c27b0;
}

.monitor-recommend-card.editor-pick::before {
  content: "🏆 編集部イチオシ";
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
  color: var(--color-text-light);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0 var(--radius-lg) 0 var(--radius-md);
}

.monitor-recommend-card.best-value::before {
  content: "💰 コスパ最強";
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, var(--color-success), #388e3c);
  color: var(--color-text-light);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 0 var(--radius-lg) 0 var(--radius-md);
}

.monitor-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
  padding-right: 120px;
}

.monitor-card-brand {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.monitor-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.monitor-card-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: var(--spacing-md) 0;
}

.monitor-spec-item {
  text-align: center;
}

.monitor-spec-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: block;
}

.monitor-spec-value {
  font-weight: 700;
  color: var(--color-text);
}

.monitor-spec-value.highlight {
  color: var(--color-success);
}

.monitor-card-features {
  margin: var(--spacing-md) 0;
}

.monitor-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.monitor-feature-list li {
  background: #e3f2fd;
  color: var(--color-primary);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
}

.monitor-card-verdict {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.monitor-verdict-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
  font-size: 0.9rem;
}

.monitor-verdict-text {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.6;
}

/* --- Mac特有問題の警告ボックス --- */
.mac-warning-box {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border: 2px solid #9c27b0;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.mac-warning-box::before {
  content: " Mac ユーザー必読";
  display: block;
  font-weight: 700;
  color: #7b1fa2;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

.mac-warning-box ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.mac-warning-box li {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

/* --- USB-C規格比較表 --- */
.usbc-spec-comparison {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.usbc-spec-comparison thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1565c0 100%);
  color: var(--color-text-light);
}

.usbc-spec-comparison th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.usbc-spec-comparison td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.usbc-spec-comparison tbody tr:hover {
  background: #e3f2fd;
}

.usbc-spec-comparison .spec-name {
  text-align: left;
  font-weight: 600;
  color: var(--color-primary);
}

.usbc-spec-comparison .yes {
  color: var(--color-success);
  font-weight: 700;
}

.usbc-spec-comparison .no {
  color: #ef4444;
}

.usbc-spec-comparison .maybe {
  color: var(--color-warning);
}

/* --- 技術用語解説カード --- */
.tech-term-card {
  background: var(--color-bg-card);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.tech-term-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.tech-term-name-en {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: var(--spacing-sm);
}

.tech-term-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* --- ベネフィットカード --- */
.benefit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.benefit-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all var(--transition-normal);
}

.benefit-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
}

.benefit-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.benefit-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* --- デメリット警告ボックス --- */
.demerit-box {
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
  border: 2px solid #fc8181;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.demerit-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #c53030;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.demerit-box ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.demerit-box li {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

/* --- レスポンシブ（USB-Cモニター記事） --- */
@media (max-width: 768px) {
  .usbc-cable-visual {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .usbc-cable-line-graphic {
    width: 8px;
    height: 50px;
  }

  .usbc-logo-grid {
    grid-template-columns: 1fr 1fr;
  }

  .usbc-wattage-grid {
    grid-template-columns: 1fr 1fr;
  }

  .monitor-card-header {
    padding-right: 0;
    flex-direction: column;
  }

  .monitor-card-specs {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefit-cards {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   研究者向け4Kモニター記事専用スタイル
   ===================================================== */

/* --- パネル技術比較カード --- */
.panel-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.panel-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all var(--transition-normal);
}

.panel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.panel-card--recommended {
  border-color: var(--color-success);
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
  position: relative;
}

.panel-card--recommended::before {
  content: "✓ 研究者推奨";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-success);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
}

.panel-card--warning {
  border-color: var(--color-warning);
  background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
}

.panel-card--danger {
  border-color: #dc3545;
  background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%);
  opacity: 0.85;
}

.panel-card-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
}

.panel-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.panel-card-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.panel-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.panel-card-features li {
  padding: var(--spacing-xs) 0;
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--color-border);
}

.panel-card-features li:last-child {
  border-bottom: none;
}

.panel-card-verdict {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
}

.verdict--best {
  background: var(--color-success);
  color: white;
}

.verdict--ok {
  background: var(--color-warning);
  color: #333;
}

.verdict--bad {
  background: #dc3545;
  color: white;
}

/* --- PPI比較チャート --- */
.ppi-chart {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.ppi-chart-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.ppi-bar-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ppi-bar-item {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: var(--spacing-md);
}

.ppi-bar-label {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: right;
}

.ppi-bar-track {
  background: var(--color-bg);
  border-radius: 20px;
  height: 30px;
  overflow: hidden;
  position: relative;
}

.ppi-bar {
  height: 100%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--spacing-md);
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  transition: width 0.8s ease;
}

.ppi-bar--low {
  background: linear-gradient(90deg, #ffccbc, #ff8a65);
}

.ppi-bar--medium {
  background: linear-gradient(90deg, #fff9c4, #ffc107);
}

.ppi-bar--optimal {
  background: linear-gradient(90deg, #a5d6a7, #4caf50);
}

.ppi-bar--retina {
  background: linear-gradient(90deg, #90caf9, #1e88e5);
}

.ppi-bar-value {
  font-weight: 700;
  color: var(--color-text);
}

.ppi-threshold {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: linear-gradient(90deg, #e3f2fd, #bbdefb);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.9rem;
}

.ppi-threshold strong {
  color: var(--color-primary);
}

/* --- 縦置きセットアップ図解 --- */
.setup-diagram {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  color: white;
}

.setup-diagram-title {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: #90caf9;
}

.setup-visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.monitor-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.monitor-frame {
  background: linear-gradient(180deg, #3282b8 0%, #0f4c75 100%);
  border: 3px solid #4a9fd4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.monitor-frame--landscape {
  width: 160px;
  height: 100px;
}

.monitor-frame--portrait {
  width: 80px;
  height: 130px;
}

.monitor-stand {
  width: 40px;
  height: 8px;
  background: #555;
  border-radius: 0 0 4px 4px;
  margin-top: -2px;
}

.monitor-label {
  margin-top: var(--spacing-sm);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.monitor-role {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.setup-description {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.setup-description ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.setup-description li {
  margin-bottom: var(--spacing-xs);
  font-size: 0.9rem;
}

/* --- 人間工学的警告ボックス --- */
.ergonomic-warning {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
  border: 2px solid #dc3545;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.ergonomic-warning-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.1rem;
  font-weight: 700;
  color: #dc3545;
  margin-bottom: var(--spacing-md);
}

.ergonomic-warning-title::before {
  content: "⚠️";
  font-size: 1.5rem;
}

.ergonomic-warning ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.ergonomic-warning li {
  margin-bottom: var(--spacing-sm);
}

/* --- 製品ティアカード --- */
.tier-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.tier-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.tier-card:hover {
  box-shadow: var(--shadow-lg);
}

.tier-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
}

.tier-badge {
  background: white;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  flex-shrink: 0;
}

.tier-badge--gold {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #333;
}

.tier-badge--silver {
  background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
  color: #333;
}

.tier-badge--bronze {
  background: linear-gradient(135deg, #cd7f32, #a0522d);
  color: white;
}

.tier-card-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.tier-card-subtitle {
  font-size: 0.9rem;
  opacity: 0.9;
}

.tier-card-body {
  padding: var(--spacing-lg);
}

.tier-card-target {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.tier-card-target::before {
  content: "👤 ";
}

.tier-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md) 0;
}

.tier-card-features li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.tier-card-features li::before {
  content: "✓";
  color: var(--color-success);
  font-weight: 700;
  flex-shrink: 0;
}

.tier-card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: right;
  padding-top: var(--spacing-md);
  border-top: 2px solid var(--color-border);
}

/* --- 技術スペック比較マトリクス --- */
.spec-matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-xl) 0;
  font-size: 0.9rem;
}

.spec-matrix thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
}

.spec-matrix th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
}

.spec-matrix td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.spec-matrix tbody tr:nth-child(even) {
  background: var(--color-bg);
}

.spec-matrix tbody tr:hover {
  background: #e3f2fd;
}

.spec-cell--best {
  background: #c8e6c9 !important;
  font-weight: 700;
  color: #2e7d32;
}

.spec-cell--good {
  background: #fff9c4 !important;
  color: #f57f17;
}

.spec-cell--bad {
  background: #ffcdd2 !important;
  color: #c62828;
}

.spec-rating {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.spec-rating--5 {
  background: #4caf50;
  color: white;
}

.spec-rating--4 {
  background: #8bc34a;
  color: white;
}

.spec-rating--3 {
  background: #ffc107;
  color: #333;
}

.spec-rating--2 {
  background: #ff9800;
  color: white;
}

.spec-rating--1 {
  background: #f44336;
  color: white;
}

/* --- 用語ツールチップ --- */
.tech-term {
  position: relative;
  border-bottom: 1px dotted var(--color-secondary);
  cursor: help;
}

.tech-term:hover .tech-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tech-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--color-bg-dark);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  white-space: nowrap;
  max-width: 300px;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 100;
  box-shadow: var(--shadow-lg);
}

.tech-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-bg-dark);
}

/* --- 結論サマリーボックス --- */
.conclusion-summary {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.conclusion-summary-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.conclusion-summary-title::before {
  content: "🎯";
  font-size: 1.5rem;
}

.conclusion-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.conclusion-checklist li {
  padding: var(--spacing-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1rem;
}

.conclusion-checklist li::before {
  content: "☐";
  color: var(--color-primary);
  font-size: 1.25rem;
}

/* --- 研究スタイル別シナリオカード --- */
.scenario-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.scenario-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.scenario-card-header {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  color: white;
  padding: var(--spacing-lg);
  text-align: center;
}

.scenario-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.scenario-card-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.scenario-card-body {
  padding: var(--spacing-lg);
}

.scenario-card-description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.scenario-card-setup {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  font-size: 0.9rem;
}

.scenario-card-setup-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

/* --- レスポンシブ（4Kモニター記事） --- */
@media (max-width: 768px) {
  .panel-comparison {
    grid-template-columns: 1fr;
  }

  .ppi-bar-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .ppi-bar-label {
    text-align: left;
  }

  .setup-visual {
    flex-direction: column;
    align-items: center;
  }

  .tier-card-header {
    flex-direction: column;
    text-align: center;
  }

  .spec-matrix {
    display: block;
    overflow-x: auto;
  }

  .scenario-cards {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   Web会議用モバイルモニター記事専用スタイル
   ===================================================== */

/* --- ペルソナ別おすすめカード --- */
.persona-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.persona-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.persona-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.persona-card-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
  padding: var(--spacing-lg);
  text-align: center;
}

.persona-card-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
}

.persona-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.persona-card-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
}

.persona-card-body {
  padding: var(--spacing-lg);
}

.persona-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.persona-spec-item {
  background: var(--color-bg);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.85rem;
}

.persona-spec-label {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  display: block;
  margin-bottom: 2px;
}

.persona-spec-value {
  font-weight: 700;
  color: var(--color-primary);
}

.persona-card--nomad .persona-card-header {
  background: linear-gradient(135deg, #2196f3 0%, #00bcd4 100%);
}

.persona-card--remote .persona-card-header {
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
}

.persona-card--dual .persona-card-header {
  background: linear-gradient(135deg, #9c27b0 0%, #e91e63 100%);
}

.persona-card--budget .persona-card-header {
  background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
}

/* --- 接続フロー図 --- */
.connection-flow {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  color: white;
}

.connection-flow-title {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: #90caf9;
}

.connection-flow-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.flow-node-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3282b8 0%, #0f4c75 100%);
  border: 3px solid #4a9fd4;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.flow-node-label {
  font-size: 0.85rem;
  font-weight: 500;
}

.flow-arrow {
  font-size: 1.5rem;
  color: #4a9fd4;
  animation: pulse-arrow 1.5s infinite;
}

@keyframes pulse-arrow {

  0%,
  100% {
    opacity: 0.5;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(5px);
  }
}

.connection-flow-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.85rem;
}

.legend-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.legend-icon--power {
  background: #f44336;
}

.legend-icon--video {
  background: #4caf50;
}

.legend-icon--data {
  background: #2196f3;
}

/* --- Web会議ツール設定BOX --- */
.tool-setup-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--spacing-xl) 0;
  overflow: hidden;
}

.tool-setup-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  border-bottom: 2px solid var(--color-border);
}

.tool-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
}

.tool-logo--zoom {
  background: linear-gradient(135deg, #2d8cff 0%, #0b5cff 100%);
}

.tool-logo--teams {
  background: linear-gradient(135deg, #5558af 0%, #4b49a5 100%);
}

.tool-logo--powerpoint {
  background: linear-gradient(135deg, #d24726 0%, #c43e1c 100%);
}

.tool-setup-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.tool-setup-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.tool-setup-body {
  padding: var(--spacing-lg);
}

.setup-steps {
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}

.setup-step {
  counter-increment: step-counter;
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px dashed var(--color-border);
  align-items: flex-start;
}

.setup-step:last-child {
  border-bottom: none;
}

.setup-step::before {
  content: counter(step-counter);
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.setup-step-content {
  flex: 1;
}

.setup-step-title {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.setup-step-description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.setup-step-note {
  background: #fff3e0;
  border-left: 3px solid #ff9800;
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-size: 0.85rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- トラブルシューティングチェックリスト --- */
.troubleshoot-checklist {
  background: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
  border: 2px solid #ef9a9a;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.troubleshoot-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.25rem;
  font-weight: 700;
  color: #c62828;
  margin-bottom: var(--spacing-md);
}

.troubleshoot-title::before {
  content: "🔧";
  font-size: 1.5rem;
}

.troubleshoot-symptom {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.troubleshoot-symptom-title {
  font-weight: 700;
  color: #d32f2f;
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.troubleshoot-symptom-title::before {
  content: "❌";
}

.troubleshoot-solutions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.troubleshoot-solutions li {
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
  position: relative;
  font-size: 0.9rem;
}

.troubleshoot-solutions li::before {
  content: "☐";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.troubleshoot-cause {
  background: #e3f2fd;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-sm);
  font-size: 0.85rem;
  color: var(--color-primary);
}

.troubleshoot-cause::before {
  content: "💡 原因: ";
  font-weight: 700;
}

/* --- パススルー充電解説図 --- */
.passthrough-diagram {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.passthrough-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.passthrough-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--radius-md);
}

.passthrough-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.passthrough-node-icon {
  width: 70px;
  height: 70px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  box-shadow: var(--shadow-md);
}

.passthrough-node-icon--outlet {
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  color: white;
}

.passthrough-node-icon--monitor {
  background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);
  color: white;
}

.passthrough-node-icon--laptop {
  background: linear-gradient(135deg, #78909c 0%, #455a64 100%);
  color: white;
}

.passthrough-node-label {
  font-size: 0.85rem;
  font-weight: 500;
}

.passthrough-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-secondary);
}

.passthrough-arrow-icon {
  font-size: 1.5rem;
}

.passthrough-arrow-label {
  font-size: 0.75rem;
  font-weight: 500;
}

.passthrough-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.passthrough-benefit {
  background: #e8f5e9;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.passthrough-benefit-icon {
  color: #4caf50;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.passthrough-benefit-text {
  font-size: 0.9rem;
}

/* --- 周辺機器エコシステムカード --- */
.ecosystem-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.ecosystem-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all var(--transition-normal);
}

.ecosystem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.ecosystem-card-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
}

.ecosystem-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.ecosystem-card-description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.ecosystem-card-effect {
  background: var(--color-bg);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-success);
}

/* --- Web会議選び方5基準 --- */
.criteria-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.criteria-item {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
  transition: all var(--transition-normal);
}

.criteria-item:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

.criteria-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.criteria-content {
  flex: 1;
}

.criteria-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.criteria-description {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
}

.criteria-highlight {
  background: #fff3e0;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-sm);
  font-size: 0.9rem;
  border-left: 3px solid #ff9800;
}

/* --- Web会議メリットカード --- */
.benefit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.benefit-card {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid #90caf9;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all var(--transition-normal);
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.benefit-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}

.benefit-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.benefit-card-description {
  font-size: 0.9rem;
  color: var(--color-text);
}

/* --- スペックレーダー表示エリア --- */
.spec-radar-container {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  text-align: center;
}

.spec-radar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.spec-bars {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.spec-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 50px;
  align-items: center;
  gap: var(--spacing-md);
}

.spec-bar-label {
  text-align: right;
  font-size: 0.9rem;
  font-weight: 500;
}

.spec-bar-track {
  background: var(--color-bg);
  border-radius: 10px;
  height: 20px;
  overflow: hidden;
}

.spec-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.8s ease;
}

.spec-bar-fill--high {
  background: linear-gradient(90deg, #4caf50, #8bc34a);
}

.spec-bar-fill--medium {
  background: linear-gradient(90deg, #ffc107, #ffeb3b);
}

.spec-bar-fill--low {
  background: linear-gradient(90deg, #f44336, #ff5722);
}

.spec-bar-value {
  font-weight: 700;
  font-size: 0.9rem;
}

/* --- レスポンシブ（Web会議モニター記事） --- */
@media (max-width: 768px) {
  .persona-cards {
    grid-template-columns: 1fr;
  }

  .connection-flow-diagram {
    flex-direction: column;
  }

  .flow-arrow {
    transform: rotate(90deg);
  }

  .criteria-item {
    flex-direction: column;
    text-align: center;
  }

  .persona-specs {
    grid-template-columns: 1fr;
  }

  .passthrough-visual {
    flex-direction: column;
  }

  .passthrough-arrow {
    transform: rotate(90deg);
  }

  .ecosystem-cards {
    grid-template-columns: 1fr;
  }

  .spec-bar-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .spec-bar-label {
    text-align: left;
  }
}

/* ===================================================
   科研費ドッキングステーション記事用スタイル
   =================================================== */

/* --- 購入理由書テンプレート --- */
.purchase-reason-template {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
}

.purchase-reason-template::before {
  content: "📋 コピペOK";
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--color-primary);
  color: var(--color-text-light);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
}

.purchase-reason-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px dashed var(--color-border);
}

.purchase-reason-title {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.copy-button {
  background: var(--color-secondary);
  color: var(--color-text-light);
  border: none;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.copy-button:hover {
  background: var(--color-primary);
  transform: scale(1.05);
}

.purchase-reason-content {
  background: #ffffff;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.9;
  border: 1px solid var(--color-border);
}

/* --- 10万円の壁警告ボックス --- */
.threshold-warning {
  background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
  border: 2px solid #ffc107;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
}

.threshold-warning::before {
  content: "⚠️ 10万円の壁";
  font-weight: 700;
  color: #856404;
  font-size: 1.1rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.threshold-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.threshold-item {
  background: #ffffff;
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  text-align: center;
}

.threshold-item--good {
  border: 2px solid var(--color-success);
}

.threshold-item--bad {
  border: 2px solid #dc3545;
}

.threshold-price {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.threshold-item--good .threshold-price {
  color: var(--color-success);
}

.threshold-item--bad .threshold-price {
  color: #dc3545;
}

.threshold-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* --- 事務手続きトラップ警告 --- */
.procurement-trap {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  border: 2px solid #dc3545;
  border-left: 6px solid #dc3545;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.procurement-trap-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  color: #721c24;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

.procurement-trap-title::before {
  content: "🚫";
  font-size: 1.3rem;
}

/* --- 製品比較マトリクス --- */
.product-comparison-matrix {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-xl) 0;
}

.matrix-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
  padding: var(--spacing-lg);
  text-align: center;
}

.matrix-header h3 {
  font-size: 1.25rem;
  margin: 0;
}

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

.matrix-table th,
.matrix-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.matrix-table thead th {
  background: var(--color-bg);
  font-weight: 700;
  color: var(--color-primary);
}

.matrix-table tbody tr:hover {
  background: #e3f2fd;
}

.matrix-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.matrix-badge--recommended {
  background: var(--color-success);
  color: var(--color-text-light);
}

.matrix-badge--budget {
  background: var(--color-info);
  color: var(--color-text-light);
}

.matrix-badge--premium {
  background: #6f42c1;
  color: var(--color-text-light);
}

/* --- ペルソナカード --- */
.persona-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.persona-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.persona-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.persona-card-header {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  color: var(--color-text-light);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.persona-icon {
  font-size: 2rem;
}

.persona-title {
  font-weight: 700;
  font-size: 1rem;
}

.persona-card-body {
  padding: var(--spacing-lg);
}

.persona-need {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.persona-recommendation {
  background: var(--color-bg);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-success);
}

/* --- 年度末デッドライン警告 --- */
.deadline-alert {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: var(--color-text-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.deadline-alert::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M20 20l10-10-10 10-10-10 10 10-10 10 10-10 10 10z'/%3E%3C/g%3E%3C/svg%3E");
}

.deadline-alert>* {
  position: relative;
  z-index: 1;
}

.deadline-date {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.deadline-message {
  font-size: 1.1rem;
  opacity: 0.95;
}

/* --- NGワード / OKワード比較 --- */
.word-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.word-list {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.word-list--ng {
  border-top: 4px solid #dc3545;
}

.word-list--ok {
  border-top: 4px solid var(--color-success);
}

.word-list-header {
  padding: var(--spacing-md);
  font-weight: 700;
  text-align: center;
}

.word-list--ng .word-list-header {
  background: #f8d7da;
  color: #721c24;
}

.word-list--ok .word-list-header {
  background: #d4edda;
  color: #155724;
}

.word-list-body {
  padding: var(--spacing-md);
}

.word-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

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

.word-list--ng .word-item::before {
  content: "✕";
  color: #dc3545;
  font-weight: 700;
}

.word-list--ok .word-item::before {
  content: "○";
  color: var(--color-success);
  font-weight: 700;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .threshold-comparison {
    grid-template-columns: 1fr;
  }

  .word-comparison {
    grid-template-columns: 1fr;
  }

  .persona-cards {
    grid-template-columns: 1fr;
  }

  .deadline-date {
    font-size: 1.8rem;
  }
}

/* ===================================================
   トラックボール腱鞘炎記事専用スタイル
   =================================================== */

/* --- 解剖学図解コンテナ --- */
.anatomy-diagram {
  background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.anatomy-diagram-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.anatomy-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-lg);
  align-items: center;
}

.anatomy-state {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.anatomy-state--bad {
  border: 2px solid #f44336;
}

.anatomy-state--good {
  border: 2px solid #4caf50;
}

.anatomy-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-md);
}

.anatomy-label {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-sm);
}

.anatomy-state--bad .anatomy-label {
  color: #f44336;
}

.anatomy-state--good .anatomy-label {
  color: #4caf50;
}

.anatomy-detail {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.anatomy-vs {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

/* --- 圧力データカード --- */
.pressure-data-card {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  color: var(--color-text-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  text-align: center;
}

.pressure-data-title {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: var(--spacing-lg);
}

.pressure-comparison {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.pressure-value {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pressure-number {
  font-size: 3rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

.pressure-number--danger {
  color: #ff5252;
}

.pressure-number--safe {
  color: #69f0ae;
}

.pressure-unit {
  font-size: 0.9rem;
  opacity: 0.8;
}

.pressure-label {
  font-size: 0.85rem;
  margin-top: var(--spacing-xs);
  opacity: 0.7;
}

.pressure-arrow {
  font-size: 2rem;
  color: #69f0ae;
}

.pressure-note {
  margin-top: var(--spacing-lg);
  font-size: 0.85rem;
  opacity: 0.8;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- RSIスコアカード --- */
.rsi-score-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.rsi-score-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-border);
}

.rsi-score-product {
  flex: 1;
}

.rsi-score-rank {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
  color: #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.rsi-score-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.rsi-score-type {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.rsi-score-bars {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.rsi-bar-item {
  display: grid;
  grid-template-columns: 120px 1fr 40px;
  align-items: center;
  gap: var(--spacing-md);
}

.rsi-bar-label {
  font-size: 0.85rem;
  font-weight: 500;
  text-align: right;
}

.rsi-bar-track {
  background: var(--color-bg);
  border-radius: 10px;
  height: 16px;
  overflow: hidden;
}

.rsi-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.8s ease;
}

.rsi-bar-fill--excellent {
  background: linear-gradient(90deg, #4caf50, #8bc34a);
}

.rsi-bar-fill--good {
  background: linear-gradient(90deg, #2196f3, #03a9f4);
}

.rsi-bar-fill--caution {
  background: linear-gradient(90deg, #ff9800, #ffc107);
}

.rsi-bar-fill--warning {
  background: linear-gradient(90deg, #f44336, #ff5722);
}

.rsi-bar-score {
  font-weight: 700;
  font-size: 0.9rem;
}

.rsi-score-verdict {
  background: #e8f5e9;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.rsi-verdict-title {
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.rsi-verdict-text {
  font-size: 0.9rem;
  color: var(--color-text);
}

/* --- 症状診断チャート --- */
.diagnosis-flowchart {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.diagnosis-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.diagnosis-step {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.diagnosis-step::after {
  content: '↓';
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: var(--color-text-muted);
}

.diagnosis-step:last-of-type::after {
  display: none;
}

.diagnosis-question {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
}

.diagnosis-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.diagnosis-option {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  transition: all var(--transition-fast);
}

.diagnosis-option:hover {
  border-color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.diagnosis-option-answer {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.diagnosis-option-result {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.diagnosis-result {
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  color: var(--color-text-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  margin-top: var(--spacing-lg);
}

.diagnosis-result-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.diagnosis-result-product {
  font-size: 1rem;
  opacity: 0.95;
}

/* --- 学習曲線タイムライン --- */
.learning-curve {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.learning-curve-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.learning-phases {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 var(--spacing-md);
}

.learning-phases::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 10%;
  right: 10%;
  height: 4px;
  background: linear-gradient(90deg, #f44336, #ff9800, #4caf50);
  border-radius: 2px;
}

.learning-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  flex: 1;
  text-align: center;
}

.learning-phase-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-md);
}

.learning-phase--despair .learning-phase-icon {
  background: linear-gradient(135deg, #f44336, #e53935);
}

.learning-phase--adapt .learning-phase-icon {
  background: linear-gradient(135deg, #ff9800, #fb8c00);
}

.learning-phase--master .learning-phase-icon {
  background: linear-gradient(135deg, #4caf50, #43a047);
}

.learning-phase-days {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.learning-phase-name {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.learning-phase-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  max-width: 150px;
}

/* --- 医学的警告ボックス --- */
.medical-warning {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #ff9800;
  border-left: 6px solid #ff9800;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.medical-warning-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.medical-warning-icon {
  font-size: 1.5rem;
}

.medical-warning-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #e65100;
}

.medical-warning-content {
  color: var(--color-text);
  font-size: 0.95rem;
}

.medical-warning-content ul {
  margin: var(--spacing-sm) 0 0 var(--spacing-lg);
}

.medical-warning--danger {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  border-color: #f44336;
}

.medical-warning--danger .medical-warning-title {
  color: #c62828;
}

/* --- メカニズム説明カード --- */
.mechanism-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--spacing-xl) 0;
}

.mechanism-card-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  padding: var(--spacing-md) var(--spacing-lg);
}

.mechanism-card-title {
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.mechanism-card-body {
  padding: var(--spacing-lg);
}

.mechanism-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mechanism-list li {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.mechanism-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mechanism-number {
  background: var(--color-primary);
  color: var(--color-text-light);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.mechanism-text {
  flex: 1;
}

.mechanism-text strong {
  color: var(--color-primary);
}

/* --- 製品比較カード（トラックボール用） --- */
.trackball-product-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--spacing-lg) 0;
  transition: all var(--transition-normal);
}

.trackball-product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.trackball-product-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  padding: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trackball-product-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.trackball-product-type {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 4px;
}

.trackball-product-price {
  background: rgba(255, 255, 255, 0.2);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.trackball-product-body {
  padding: var(--spacing-lg);
}

.trackball-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.trackball-spec-item {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.trackball-spec-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.trackball-spec-value {
  font-weight: 700;
  color: var(--color-primary);
}

.trackball-verdict {
  display: flex;
  gap: var(--spacing-md);
}

.trackball-verdict-good,
.trackball-verdict-bad {
  flex: 1;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.trackball-verdict-good {
  background: #e8f5e9;
}

.trackball-verdict-bad {
  background: #ffebee;
}

.trackball-verdict-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: var(--spacing-xs);
}

.trackball-verdict-good .trackball-verdict-title {
  color: #2e7d32;
}

.trackball-verdict-bad .trackball-verdict-title {
  color: #c62828;
}

.trackball-verdict-list {
  font-size: 0.85rem;
  margin: 0;
  padding-left: var(--spacing-md);
}

/* --- レスポンシブ（トラックボール記事） --- */
@media (max-width: 768px) {
  .anatomy-comparison {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .anatomy-vs {
    padding: var(--spacing-md) 0;
  }

  .pressure-comparison {
    flex-direction: column;
  }

  .pressure-arrow {
    transform: rotate(90deg);
  }

  .rsi-bar-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .rsi-bar-label {
    text-align: left;
  }

  .learning-phases {
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .learning-phases::before {
    display: none;
  }

  .learning-phase-desc {
    max-width: 100%;
  }

  .diagnosis-options {
    grid-template-columns: 1fr;
  }

  .trackball-verdict {
    flex-direction: column;
  }
}


/* =====================================================
   科研費モニターアーム記事専用スタイル
   ===================================================== */

/* --- 購入理由書テンプレートボックス --- */
.reason-template-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin: var(--spacing-xl) 0;
  overflow: hidden;
}

.reason-template-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reason-template-title {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.reason-template-title::before {
  content: "📄";
  font-size: 1.25rem;
}

.reason-template-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.reason-template-body {
  padding: var(--spacing-lg);
}

.reason-template-content {
  background: #f8f9fa;
  padding: var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 2;
  white-space: pre-wrap;
  font-family: 'Noto Sans JP', sans-serif;
  border: 1px dashed var(--color-border);
}

.reason-template-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copy-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.copy-button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.copy-button::before {
  content: "📋";
}

.copy-button--copied {
  background: var(--color-success);
}

.copy-button--copied::before {
  content: "✅";
}

/* --- 10万円境界線ビジュアル --- */
.price-threshold {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #ff9800;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.price-threshold-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e65100;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.price-threshold-title::before {
  content: "⚠️";
  font-size: 1.5rem;
}

.price-threshold-visual {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--spacing-lg);
}

.price-zone {
  flex: 1;
  padding: var(--spacing-lg);
  text-align: center;
}

.price-zone--safe {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border: 2px solid #4caf50;
  border-right: none;
}

.price-zone--danger {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border: 2px solid #f44336;
  border-left: none;
}

.price-zone-divider {
  width: 4px;
  background: linear-gradient(180deg, #ff9800 0%, #f57c00 100%);
  position: relative;
}

.price-zone-divider::after {
  content: "¥100,000";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ff9800;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.price-zone-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.price-zone--safe .price-zone-title {
  color: #2e7d32;
}

.price-zone--danger .price-zone-title {
  color: #c62828;
}

.price-zone-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.price-zone--safe .price-zone-badge {
  background: #4caf50;
  color: white;
}

.price-zone--danger .price-zone-badge {
  background: #f44336;
  color: white;
}

.price-zone-description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* --- 調達チャネルフロー図 --- */
.procurement-flow {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.procurement-flow-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.procurement-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.procurement-channel {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  border: 2px solid var(--color-border);
  transition: all var(--transition-normal);
}

.procurement-channel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.procurement-channel-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.procurement-channel-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  flex-shrink: 0;
}

.procurement-channel-icon--amazon {
  background: linear-gradient(135deg, #ff9900 0%, #e67300 100%);
}

.procurement-channel-icon--askul {
  background: linear-gradient(135deg, #e60012 0%, #c30010 100%);
}

.procurement-channel-icon--coop {
  background: linear-gradient(135deg, #00a040 0%, #008030 100%);
}

.procurement-channel-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.procurement-channel-subtitle {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.procurement-channel-pros {
  list-style: none;
  padding: 0;
  margin: 0;
}

.procurement-channel-pros li {
  padding: var(--spacing-xs) 0;
  padding-left: var(--spacing-lg);
  position: relative;
  font-size: 0.9rem;
}

.procurement-channel-pros li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}

.procurement-channel-rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px dashed var(--color-border);
}

.procurement-channel-rating-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.procurement-channel-rating-stars {
  color: #ffc107;
  font-size: 0.9rem;
  letter-spacing: 2px;
}

/* --- 科研費特有の注意喚起ボックス --- */
.kakenhi-warning-box {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
  border: 2px solid #e91e63;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.kakenhi-warning-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1.1rem;
  font-weight: 700;
  color: #c2185b;
  margin-bottom: var(--spacing-md);
}

.kakenhi-warning-title::before {
  content: "🚨";
  font-size: 1.25rem;
}

.kakenhi-warning-content {
  font-size: 0.95rem;
  line-height: 1.8;
}

.kakenhi-warning-example {
  background: white;
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-left: 3px solid #e91e63;
}

.kakenhi-warning-example-bad {
  color: #c62828;
  margin-bottom: var(--spacing-sm);
}

.kakenhi-warning-example-good {
  color: #2e7d32;
}

.kakenhi-warning-example-bad::before {
  content: "❌ NG: ";
  font-weight: 700;
}

.kakenhi-warning-example-good::before {
  content: "✅ OK: ";
  font-weight: 700;
}

/* --- 製品比較カード --- */
.product-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.product-comparison-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.product-comparison-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.product-comparison-card--recommended {
  border-color: var(--color-primary);
  position: relative;
}

.product-comparison-card--recommended::before {
  content: "🏆 研究室標準推奨";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
  text-align: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.8rem;
  font-weight: 700;
}

.product-comparison-card--recommended .product-comparison-header {
  padding-top: calc(var(--spacing-lg) + 24px);
}

.product-comparison-header {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  padding: var(--spacing-lg);
  text-align: center;
  border-bottom: 2px solid var(--color-border);
}

.product-comparison-brand {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.product-comparison-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.product-comparison-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.product-comparison-price-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: normal;
}

.product-comparison-body {
  padding: var(--spacing-lg);
}

.product-comparison-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md);
}

.product-comparison-specs li {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.9rem;
}

.product-comparison-specs li:last-child {
  border-bottom: none;
}

.product-comparison-spec-label {
  color: var(--color-text-muted);
}

.product-comparison-spec-value {
  font-weight: 600;
  color: var(--color-text);
}

.product-comparison-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.product-comparison-pros,
.product-comparison-cons {
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.product-comparison-pros {
  background: #e8f5e9;
}

.product-comparison-cons {
  background: #fff3e0;
}

.product-comparison-pros-title,
.product-comparison-cons-title {
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  font-size: 0.8rem;
}

.product-comparison-pros-title {
  color: #2e7d32;
}

.product-comparison-cons-title {
  color: #e65100;
}

/* --- レスポンシブ（科研費記事） --- */
@media (max-width: 768px) {
  .price-threshold-visual {
    flex-direction: column;
  }

  .price-zone--safe {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-right: 2px solid #4caf50;
    border-bottom: none;
  }

  .price-zone--danger {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border-left: 2px solid #f44336;
    border-top: none;
  }

  .price-zone-divider {
    width: 100%;
    height: 4px;
  }

  .price-zone-divider::after {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .procurement-channels {
    grid-template-columns: 1fr;
  }

  .product-comparison-grid {
    grid-template-columns: 1fr;
  }

  .product-comparison-pros-cons {
    grid-template-columns: 1fr;
  }

  .reason-template-header {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }

  .reason-template-footer {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

/* =======================================================
   Web会議モバイルバッテリー記事 専用スタイル
   ======================================================= */

/* --- 消費電力比較グラフ --- */
.power-consumption-chart {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
}

.power-consumption-chart-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.power-bar-container {
  margin-bottom: var(--spacing-md);
}

.power-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: var(--spacing-xs);
}

.power-bar-label-name {
  color: var(--color-text);
  font-weight: 500;
}

.power-bar-label-value {
  color: var(--color-primary);
  font-weight: 700;
}

.power-bar {
  height: 24px;
  background: var(--color-bg);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.power-bar-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 1s ease-out;
  position: relative;
}

.power-bar-fill--idle {
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  width: 25%;
}

.power-bar-fill--browsing {
  background: linear-gradient(90deg, #2196f3, #03a9f4);
  width: 35%;
}

.power-bar-fill--meeting {
  background: linear-gradient(90deg, #ff9800, #f44336);
  width: 70%;
}

.power-bar-fill--heavy {
  background: linear-gradient(90deg, #e91e63, #9c27b0);
  width: 95%;
}

/* --- 危機回避警告ボックス --- */
.crisis-warning {
  background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
  border: 2px solid #f44336;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  position: relative;
  overflow: hidden;
}

.crisis-warning::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #f44336, #ff9800, #f44336);
  animation: crisis-pulse 2s ease-in-out infinite;
}

@keyframes crisis-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.crisis-warning-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
  display: block;
  text-align: center;
}

.crisis-warning-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #c62828;
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.crisis-warning-content {
  color: var(--color-text);
  line-height: 1.8;
}

.crisis-warning-content strong {
  color: #c62828;
}

/* --- ユーザータイプ別診断カード --- */
.user-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.user-type-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.user-type-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.user-type-card--mobile {
  border-color: #03a9f4;
}

.user-type-card--nomad {
  border-color: #4caf50;
}

.user-type-card--executive {
  border-color: #9c27b0;
}

.user-type-card-header {
  padding: var(--spacing-lg);
  color: white;
  text-align: center;
}

.user-type-card--mobile .user-type-card-header {
  background: linear-gradient(135deg, #03a9f4, #0288d1);
}

.user-type-card--nomad .user-type-card-header {
  background: linear-gradient(135deg, #4caf50, #388e3c);
}

.user-type-card--executive .user-type-card-header {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
}

.user-type-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
  display: block;
}

.user-type-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.user-type-subtitle {
  font-size: 0.9rem;
  opacity: 0.9;
}

.user-type-card-body {
  padding: var(--spacing-lg);
}

.user-type-needs {
  margin-bottom: var(--spacing-md);
}

.user-type-needs-title {
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--spacing-sm);
}

.user-type-needs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.user-type-needs-list li {
  padding: var(--spacing-xs) 0;
  padding-left: 1.5em;
  position: relative;
  font-size: 0.9rem;
}

.user-type-needs-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}

.user-type-spec {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.user-type-spec-title {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.85rem;
  margin-bottom: var(--spacing-sm);
}

.user-type-spec-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--color-border);
}

.user-type-spec-item:last-child {
  border-bottom: none;
}

.user-type-spec-label {
  color: var(--color-text-muted);
}

.user-type-spec-value {
  font-weight: 600;
  color: var(--color-text);
}

/* --- 航空持ち込み規制アラート --- */
.regulation-alert {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid #1976d2;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.regulation-alert-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.regulation-alert-icon {
  font-size: 2.5rem;
}

.regulation-alert-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0d47a1;
}

.regulation-zone-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--spacing-md);
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.regulation-zone-table th,
.regulation-zone-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.regulation-zone-table th {
  background: #1976d2;
  color: white;
  font-weight: 600;
}

.regulation-zone-table tr:last-child td {
  border-bottom: none;
}

.regulation-zone--ok {
  background: #e8f5e9;
}

.regulation-zone--ok td:first-child {
  border-left: 4px solid #4caf50;
}

.regulation-zone--limited {
  background: #fff8e1;
}

.regulation-zone--limited td:first-child {
  border-left: 4px solid #ff9800;
}

.regulation-zone--prohibited {
  background: #ffebee;
}

.regulation-zone--prohibited td:first-child {
  border-left: 4px solid #f44336;
}

.regulation-status {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.regulation-status--ok {
  color: #2e7d32;
}

.regulation-status--limited {
  color: #f57c00;
}

.regulation-status--prohibited {
  color: #c62828;
}

/* --- スペック比較テーブル拡張 --- */
.spec-table-pro {
  width: 100%;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-lg) 0;
}

.spec-table-pro th {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  padding: var(--spacing-md);
  font-weight: 600;
  text-align: center;
}

.spec-table-pro td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.spec-table-pro tbody tr:hover {
  background: #e3f2fd;
}

.spec-highlight {
  font-weight: 700;
  color: var(--color-primary);
}

.spec-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.spec-badge--recommended {
  background: #4caf50;
  color: white;
}

.spec-badge--standard {
  background: #2196f3;
  color: white;
}

.spec-badge--advanced {
  background: #9c27b0;
  color: white;
}

/* --- FAQ構造化対応 --- */
.faq-section {
  margin: var(--spacing-xl) 0;
}

.faq-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg);
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.faq-question:hover {
  background: #e3f2fd;
}

.faq-question::before {
  content: 'Q.';
  color: var(--color-primary);
  font-weight: 700;
  margin-right: var(--spacing-sm);
}

.faq-question-icon {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.faq-item.active .faq-question-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--spacing-lg);
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.faq-item.active .faq-answer {
  padding: var(--spacing-lg);
  max-height: 500px;
}

.faq-answer-content {
  color: var(--color-text);
  line-height: 1.8;
}

.faq-answer-content::before {
  content: 'A.';
  color: var(--color-success);
  font-weight: 700;
  margin-right: var(--spacing-sm);
}

/* --- 診断結果表 --- */
.diagnosis-table {
  width: 100%;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-lg) 0;
  border-collapse: collapse;
}

.diagnosis-table th {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-md);
  text-align: left;
  font-weight: 600;
}

.diagnosis-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.diagnosis-table tbody tr:nth-child(even) {
  background: var(--color-bg);
}

.diagnosis-table tbody tr:hover {
  background: #e3f2fd;
}

/* --- レスポンシブ（Web会議バッテリー記事） --- */
@media (max-width: 768px) {
  .user-type-grid {
    grid-template-columns: 1fr;
  }

  .regulation-zone-table {
    font-size: 0.85rem;
  }

  .regulation-zone-table th,
  .regulation-zone-table td {
    padding: var(--spacing-sm);
  }

  .crisis-warning {
    padding: var(--spacing-md);
  }

  .power-bar-label {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
}

/* ===================================================
   実験室テプラ記事用 専用スタイル
   =================================================== */

/* --- 規制コンプライアンスボックス --- */
.compliance-box {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  border: 2px solid #ff9800;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  position: relative;
}

.compliance-box--osha {
  border-color: #1565c0;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.compliance-box--ghs {
  border-color: #c62828;
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.compliance-box--glp {
  border-color: #2e7d32;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.compliance-box-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.compliance-box-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.compliance-box-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.compliance-box-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.compliance-box-content {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* GHSピクトグラムグリッド */
.ghs-pictogram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.ghs-pictogram-item {
  text-align: center;
  padding: var(--spacing-md);
  background: white;
  border-radius: var(--radius-md);
  border: 2px solid #c62828;
  transition: transform var(--transition-fast);
}

.ghs-pictogram-item:hover {
  transform: translateY(-2px);
}

.ghs-pictogram-symbol {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.ghs-pictogram-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #c62828;
}

/* --- 温度耐性ゲージ --- */
.temp-resistance-chart {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
}

.temp-resistance-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.temp-gauge {
  position: relative;
  height: 60px;
  background: linear-gradient(90deg,
      #1565c0 0%,
      /* -196℃ 極低温 青 */
      #42a5f5 15%,
      /* -80℃ 低温 */
      #81d4fa 30%,
      /* -20℃ */
      #e8f5e9 45%,
      /* 0℃ 常温帯 */
      #fff9c4 55%,
      /* 室温 */
      #ffcc80 70%,
      /* 60℃ */
      #ff7043 85%,
      /* 121℃ オートクレーブ */
      #d32f2f 100%
      /* 200℃+ 高温 */
    );
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.temp-gauge-markers {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  padding: 0 var(--spacing-sm);
}

.temp-gauge-marker {
  text-align: center;
}

.temp-gauge-marker-temp {
  font-weight: 700;
  color: var(--color-text);
}

.temp-gauge-marker-label {
  font-size: 0.7rem;
}

.temp-tape-ranges {
  margin-top: var(--spacing-lg);
}

.temp-tape-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border);
}

.temp-tape-item:last-child {
  border-bottom: none;
}

.temp-tape-name {
  width: 150px;
  font-weight: 600;
  color: var(--color-text);
}

.temp-tape-bar {
  flex: 1;
  height: 20px;
  background: var(--color-bg);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.temp-tape-range {
  position: absolute;
  height: 100%;
  border-radius: 10px;
}

.temp-tape-range--standard {
  background: linear-gradient(90deg, #81d4fa, #fff9c4);
  left: 30%;
  width: 35%;
}

.temp-tape-range--cold {
  background: linear-gradient(90deg, #1565c0, #81d4fa);
  left: 0%;
  width: 50%;
}

.temp-tape-range--heat {
  background: linear-gradient(90deg, #fff9c4, #d32f2f);
  left: 45%;
  width: 55%;
}

.temp-tape-range--cryo {
  background: linear-gradient(90deg, #0d47a1, #64b5f6);
  left: 0%;
  width: 45%;
}

.temp-tape-spec {
  width: 120px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* --- ワークフロー図 --- */
.workflow-diagram {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
}

.workflow-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.workflow-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
}

.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  border-radius: var(--radius-md);
  min-width: 120px;
  text-align: center;
  transition: transform var(--transition-fast);
}

.workflow-step:hover {
  transform: translateY(-3px);
}

.workflow-step-icon {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-xs);
}

.workflow-step-label {
  font-size: 0.85rem;
  font-weight: 600;
}

.workflow-step-desc {
  font-size: 0.7rem;
  opacity: 0.9;
  margin-top: 2px;
}

.workflow-arrow {
  font-size: 1.5rem;
  color: var(--color-secondary);
  margin: 0 var(--spacing-xs);
}

/* --- 座標システム（住所化）図解 --- */
.address-system-box {
  background: var(--color-bg-card);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.address-system-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.address-system-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.address-cell {
  aspect-ratio: 1;
  background: var(--color-bg);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.address-cell:hover {
  background: #e3f2fd;
  border-color: var(--color-secondary);
  transform: scale(1.05);
}

.address-cell--highlighted {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border: 2px solid var(--color-secondary);
}

.address-cell-code {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.address-cell-content {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 2px;
}

.address-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.address-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.85rem;
}

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

/* --- 印刷方式比較チャート --- */
.print-method-comparison {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-lg) 0;
}

.print-method-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--color-primary);
  color: white;
}

.print-method-header-cell {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
}

.print-method-header-cell:first-child {
  background: var(--color-primary-dark);
}

.print-method-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--color-border);
}

.print-method-row:last-child {
  border-bottom: none;
}

.print-method-row:nth-child(even) {
  background: var(--color-bg);
}

.print-method-cell {
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.print-method-cell:first-child {
  font-weight: 600;
  background: rgba(15, 76, 117, 0.05);
  justify-content: flex-start;
}

.print-method-rating {
  display: flex;
  gap: 2px;
}

.print-method-rating-star {
  color: #ffc107;
  font-size: 1.1rem;
}

.print-method-rating-star--empty {
  color: #e0e0e0;
}

.print-method-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.print-method-badge--good {
  background: #e8f5e9;
  color: #2e7d32;
}

.print-method-badge--warning {
  background: #fff3e0;
  color: #e65100;
}

.print-method-badge--danger {
  background: #ffebee;
  color: #c62828;
}

/* --- ケーススタディカード --- */
.case-study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.case-study-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-normal);
}

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

.case-study-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  padding: var(--spacing-lg);
}

.case-study-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.case-study-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.case-study-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
}

.case-study-body {
  padding: var(--spacing-lg);
}

.case-study-problem,
.case-study-solution {
  margin-bottom: var(--spacing-md);
}

.case-study-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
}

.case-study-problem .case-study-label {
  color: #c62828;
}

.case-study-solution .case-study-label {
  color: #2e7d32;
}

/* --- ISO日付フォーマットボックス --- */
.date-format-box {
  background: linear-gradient(135deg, #e8eaf6, #c5cae9);
  border: 2px solid #3f51b5;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.date-format-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-md);
  align-items: center;
  margin: var(--spacing-lg) 0;
}

.date-format-bad {
  background: #ffebee;
  border: 2px solid #c62828;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
}

.date-format-good {
  background: #e8f5e9;
  border: 2px solid #2e7d32;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
}

.date-format-arrow {
  font-size: 2rem;
  color: var(--color-secondary);
}

.date-format-example {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

.date-format-label {
  font-size: 0.85rem;
  margin-top: var(--spacing-sm);
}

.date-format-bad .date-format-label {
  color: #c62828;
}

.date-format-good .date-format-label {
  color: #2e7d32;
}

/* --- 危険警告ボックス（テプラ限界警告） --- */
.tepra-limit-warning {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border: 2px solid #e65100;
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.tepra-limit-warning-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.tepra-limit-warning-content {
  flex: 1;
}

.tepra-limit-warning-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e65100;
  margin-bottom: var(--spacing-sm);
}

.tepra-limit-warning-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* --- テープ選定フローチャート --- */
.tape-selector-flow {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  box-shadow: var(--shadow-md);
}

.tape-selector-question {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

.tape-selector-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.tape-selector-option {
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tape-selector-option:hover {
  border-color: var(--color-secondary);
  background: #e3f2fd;
}

.tape-selector-option--yes {
  border-color: #2e7d32;
}

.tape-selector-option--no {
  border-color: #c62828;
}

.tape-selector-result {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border: 2px solid #2e7d32;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-md);
  text-align: center;
}

.tape-selector-result-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: var(--spacing-sm);
}

/* --- レスポンシブ（実験室テプラ記事） --- */
@media (max-width: 768px) {
  .workflow-steps {
    flex-direction: column;
  }

  .workflow-arrow {
    transform: rotate(90deg);
    margin: var(--spacing-xs) 0;
  }

  .address-system-visual {
    grid-template-columns: repeat(2, 1fr);
  }

  .print-method-header,
  .print-method-row {
    grid-template-columns: 1fr;
  }

  .print-method-header-cell:first-child {
    display: none;
  }

  .print-method-cell:first-child {
    background: var(--color-primary);
    color: white;
    justify-content: center;
  }

  .date-format-comparison {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .date-format-arrow {
    transform: rotate(90deg);
  }

  .tepra-limit-warning {
    flex-direction: column;
    text-align: center;
  }

  .temp-tape-item {
    flex-wrap: wrap;
  }

  .temp-tape-name {
    width: 100%;
    margin-bottom: var(--spacing-xs);
  }

  .temp-tape-bar {
    width: 100%;
  }

  .temp-tape-spec {
    width: 100%;
    text-align: left;
    margin-top: var(--spacing-xs);
  }

  .case-study-grid {
    grid-template-columns: 1fr;
  }

  .ghs-pictogram-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================================
   E-ink PDFリーダー記事専用スタイル
   =================================================== */

/* --- E-ink スペック比較テーブル --- */
.eink-spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-lg) 0;
  font-size: 0.9rem;
}

.eink-spec-table thead {
  background: linear-gradient(135deg, #1a237e, #283593);
  color: white;
}

.eink-spec-table th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}

.eink-spec-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.eink-spec-table tbody tr:nth-child(even) {
  background: #f5f5f5;
}

.eink-spec-table tbody tr:hover {
  background: #e8eaf6;
}

.eink-spec-table .model-name {
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
}

.eink-spec-table .highlight-cell {
  background: #fff8e1;
  font-weight: 600;
}

.eink-spec-table .best-pick {
  position: relative;
}

.eink-spec-table .best-pick::after {
  content: "👑";
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: 0.8rem;
}

/* --- ペルソナ選択カード --- */
.persona-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.persona-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 2px solid transparent;
}

.persona-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.persona-card-header {
  padding: var(--spacing-lg);
  text-align: center;
}

.persona-card--academic .persona-card-header {
  background: linear-gradient(135deg, #1565c0, #1976d2);
  color: white;
}

.persona-card--professional .persona-card-header {
  background: linear-gradient(135deg, #2e7d32, #43a047);
  color: white;
}

.persona-card--enthusiast .persona-card-header {
  background: linear-gradient(135deg, #f57c00, #ff9800);
  color: white;
}

.persona-card-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
}

.persona-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.persona-card-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
}

.persona-card-body {
  padding: var(--spacing-lg);
}

.persona-needs {
  list-style: none;
  margin: 0 0 var(--spacing-md) 0;
  padding: 0;
}

.persona-needs li {
  padding: var(--spacing-xs) 0;
  padding-left: 1.5em;
  position: relative;
}

.persona-needs li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
}

.persona-recommendation {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
  color: var(--color-primary);
}

/* --- ディスプレイ技術解説ボックス --- */
.display-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.display-tech-box {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.display-tech-header {
  padding: var(--spacing-md) var(--spacing-lg);
  color: white;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.display-tech-box--kaleido .display-tech-header {
  background: linear-gradient(135deg, #5c6bc0, #7986cb);
}

.display-tech-box--gallery .display-tech-header {
  background: linear-gradient(135deg, #26a69a, #4db6ac);
}

.display-tech-box--colorsoft .display-tech-header {
  background: linear-gradient(135deg, #ff7043, #ff8a65);
}

.display-tech-name {
  font-weight: 700;
  font-size: 1.1rem;
}

.display-tech-body {
  padding: var(--spacing-lg);
}

.display-tech-spec {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border);
}

.display-tech-spec:last-child {
  border-bottom: none;
}

.display-tech-label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.display-tech-value {
  font-weight: 600;
  color: var(--color-text);
}

/* --- 製品レビューカード --- */
.product-review-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-xl) 0;
  border: 1px solid var(--color-border);
}

.product-review-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  padding: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-review-title {
  font-size: 1.3rem;
  font-weight: 700;
}

.product-review-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.product-review-body {
  padding: var(--spacing-lg);
}

.product-review-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.product-review-spec-item {
  text-align: center;
}

.product-review-spec-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--spacing-xs);
}

.product-review-spec-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.product-review-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.product-review-pros,
.product-review-cons {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.product-review-pros {
  background: #e8f5e9;
  border-left: 4px solid #4caf50;
}

.product-review-cons {
  background: #ffebee;
  border-left: 4px solid #f44336;
}

.product-review-pros h4,
.product-review-cons h4 {
  font-size: 0.9rem;
  margin-bottom: var(--spacing-sm);
}

.product-review-pros h4 {
  color: #2e7d32;
}

.product-review-cons h4 {
  color: #c62828;
}

.product-review-pros ul,
.product-review-cons ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.product-review-pros li,
.product-review-cons li {
  padding: var(--spacing-xs) 0;
}

.product-review-recommendation {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.product-review-recommendation-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

/* --- 書き味評価スケール --- */
.pen-feel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.pen-feel-item {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
}

.pen-feel-device {
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

.pen-feel-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.pen-feel-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.pen-feel-fill--paper {
  background: linear-gradient(90deg, #66bb6a, #4caf50);
}

.pen-feel-fill--glass {
  background: linear-gradient(90deg, #42a5f5, #1e88e5);
}

.pen-feel-fill--smooth {
  background: linear-gradient(90deg, #ab47bc, #9c27b0);
}

.pen-feel-description {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- 同期ワークフロー図解 --- */
.sync-workflow {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  box-shadow: var(--shadow-md);
}

.sync-workflow-title {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.sync-workflow-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.sync-workflow-step {
  flex: 1;
  min-width: 120px;
  text-align: center;
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
}

.sync-workflow-step-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.sync-workflow-step-label {
  font-size: 0.85rem;
  font-weight: 600;
}

.sync-workflow-arrow {
  font-size: 1.5rem;
  color: var(--color-secondary);
}

/* --- 結論・推奨ボックス --- */
.verdict-box {
  background: linear-gradient(135deg, #1a237e, #283593);
  color: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  text-align: center;
}

.verdict-box-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.verdict-box-recommendation {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
}

.verdict-box-reason {
  font-size: 1rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

.verdict-box-cta {
  margin-top: var(--spacing-lg);
}

.verdict-box-cta .btn {
  background: white;
  color: #1a237e;
}

.verdict-box-cta .btn:hover {
  background: #e8eaf6;
}

/* --- OS比較カード --- */
.os-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.os-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.os-card-header {
  padding: var(--spacing-lg);
  text-align: center;
  color: white;
}

.os-card--android .os-card-header {
  background: linear-gradient(135deg, #43a047, #66bb6a);
}

.os-card--proprietary .os-card-header {
  background: linear-gradient(135deg, #5c6bc0, #7986cb);
}

.os-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.os-card-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
}

.os-card-body {
  padding: var(--spacing-lg);
}

.os-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.os-feature-list li {
  padding: var(--spacing-sm) 0;
  padding-left: 1.8em;
  position: relative;
  border-bottom: 1px dashed var(--color-border);
}

.os-feature-list li:last-child {
  border-bottom: none;
}

.os-feature-list li::before {
  position: absolute;
  left: 0;
}

.os-feature-list li.pro::before {
  content: "✅";
}

.os-feature-list li.con::before {
  content: "⚠️";
}

/* --- 科研費購入ガイドボックス --- */
.kakenhi-guide-box {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border: 2px solid #ff9800;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.kakenhi-guide-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #e65100;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.kakenhi-template {
  background: white;
  border: 1px solid #ffcc80;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-md);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.8;
}

.kakenhi-template-label {
  background: #ff9800;
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  display: inline-block;
  font-family: var(--font-main);
}

/* --- レスポンシブ（E-ink記事） --- */
@media (max-width: 768px) {
  .persona-cards {
    grid-template-columns: 1fr;
  }

  .display-tech-grid {
    grid-template-columns: 1fr;
  }

  .product-review-pros-cons {
    grid-template-columns: 1fr;
  }

  .os-comparison {
    grid-template-columns: 1fr;
  }

  .sync-workflow-steps {
    flex-direction: column;
  }

  .sync-workflow-arrow {
    transform: rotate(90deg);
  }

  .eink-spec-table {
    display: block;
    overflow-x: auto;
  }
}


/* ===========================================
   ケーブルマネジメント記事専用スタイル
   =========================================== */

/* --- レベル診断チャート --- */
.level-diagnostic {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.level-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  transition: all var(--transition-normal);
}

.level-card:hover {
  border-color: var(--color-secondary);
  transform: translateX(8px);
}

.level-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text-light);
  flex-shrink: 0;
}

.level-badge--danger {
  background: #dc3545;
}

.level-badge--warning {
  background: #fd7e14;
}

.level-badge--info {
  background: #17a2b8;
}

.level-badge--success {
  background: #28a745;
}

/* --- 安全警告ボックス --- */
.safety-warning {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  border: 2px solid #dc3545;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.safety-warning-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  color: #dc3545;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

/* --- ステップガイド --- */
.step-guide {
  counter-reset: step-counter;
  margin: var(--spacing-xl) 0;
}

.step-item {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.step-item::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
  padding-top: var(--spacing-sm);
}

/* --- 製品比較テーブル拡張 --- */
.product-comparison {
  overflow-x: auto;
  margin: var(--spacing-lg) 0;
}

.product-comparison table {
  min-width: 600px;
}

.product-rating {
  display: flex;
  gap: 2px;
}

.product-rating .star {
  color: #ffc107;
}

.product-rating .star--empty {
  color: #dee2e6;
}

/* --- コスト別タブ --- */
.cost-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.cost-tab {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.cost-tab:hover,
.cost-tab.active {
  background: var(--color-primary);
  color: var(--color-text-light);
  border-color: var(--color-primary);
}

.cost-content {
  display: none;
}

.cost-content.active {
  display: block;
}

/* --- 昇降デスク計算ボックス --- */
.standing-desk-calc {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.calc-formula {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  text-align: center;
  margin: var(--spacing-md) 0;
}

.calc-result {
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;
}

/* --- Japandiスタイルショーケース --- */
.style-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.style-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.style-card-image {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.style-card-image--japandi {
  background: linear-gradient(135deg, #d7ccc8 0%, #bcaaa4 100%);
}

.style-card-image--white {
  background: linear-gradient(135deg, #fafafa 0%, #eeeeee 100%);
}

.style-card-image--gaming {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #00ff88;
}

.style-card-body {
  padding: var(--spacing-lg);
}

/* --- 神10選リスト --- */
.god-item {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  display: flex;
  gap: var(--spacing-lg);
  transition: all var(--transition-normal);
}

.god-item:hover {
  border-color: #ffc107;
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.2);
}

.god-item-rank {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: var(--color-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.god-item-content {
  flex: 1;
}

.god-item-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xs);
}

.god-item-category {
  display: inline-block;
  background: var(--color-info);
  color: var(--color-text-light);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 12px;
  margin-bottom: var(--spacing-sm);
}

/* --- IoT/スマートホーム機能ボックス --- */
.iot-feature {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.iot-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.iot-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
}

.iot-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

/* --- トラッキング現象解説ボックス --- */
.tracking-explainer {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #ff9800;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.tracking-stages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.tracking-stage {
  flex: 1;
  min-width: 150px;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  position: relative;
}

.tracking-stage::after {
  content: '→';
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #ff9800;
}

.tracking-stage:last-child::after {
  display: none;
}

.tracking-stage-number {
  width: 28px;
  height: 28px;
  background: #ff9800;
  color: var(--color-text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  margin: 0 auto var(--spacing-sm);
}

/* --- アクションプランカード --- */
.action-plan {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.action-plan h3 {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
}

.action-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.action-plan-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
}

.action-plan-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

/* --- ケーブルマネジメント レスポンシブ対応 --- */
@media (max-width: 768px) {
  .level-card {
    flex-direction: column;
    text-align: center;
  }

  .step-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .god-item {
    flex-direction: column;
    text-align: center;
  }

  .tracking-stage::after {
    display: none;
  }
}

/* ===================================================
   技術書「紙 vs 電子」記事専用スタイル
   =================================================== */

/* --- 診断フローチャート --- */
.decision-flowchart {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.flowchart-title {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.flowchart-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 600px;
  margin: 0 auto;
}

.flowchart-question {
  background: var(--color-bg-card);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  font-weight: 600;
  position: relative;
}

.flowchart-question::after {
  content: '↓';
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: var(--color-primary);
}

.flowchart-branches {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-md);
}

.flowchart-branch {
  flex: 1;
  max-width: 280px;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.flowchart-branch-label {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.flowchart-branch-label--yes {
  background: #c8e6c9;
  color: #2e7d32;
}

.flowchart-branch-label--no {
  background: #ffcdd2;
  color: #c62828;
}

.flowchart-result {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
}

/* --- 7軸比較マトリクス --- */
.comparison-matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-xl) 0;
  font-size: 0.9rem;
}

.comparison-matrix thead {
  background: linear-gradient(135deg, #1565c0, #1976d2);
  color: white;
}

.comparison-matrix th {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  font-weight: 600;
}

.comparison-matrix td {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.comparison-matrix tbody tr:nth-child(even) {
  background: #f5f5f5;
}

.comparison-matrix tbody tr:hover {
  background: #e3f2fd;
}

.comparison-matrix .axis-name {
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
}

.comparison-matrix .rating-best {
  color: #2e7d32;
  font-weight: 700;
}

.comparison-matrix .rating-good {
  color: #1565c0;
}

.comparison-matrix .rating-poor {
  color: #c62828;
}

/* --- 認知科学インサイトボックス --- */
.cognitive-insight-box {
  background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%);
  border-left: 5px solid #7c4dff;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.cognitive-insight-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 700;
  color: #512da8;
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

.cognitive-insight-content {
  color: var(--color-text);
  line-height: 1.8;
}

.cognitive-insight-content strong {
  color: #512da8;
}

/* --- リセールバリュー・コストシミュレーション --- */
.cost-simulation-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-lg) 0;
}

.cost-simulation-table thead {
  background: linear-gradient(135deg, #ff8f00, #ffa726);
  color: white;
}

.cost-simulation-table th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
}

.cost-simulation-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.cost-simulation-table tbody tr:nth-child(even) {
  background: #fff8e1;
}

.cost-simulation-table .book-title {
  text-align: left;
  font-weight: 600;
  color: var(--color-primary);
}

.cost-simulation-table .high-value {
  color: #2e7d32;
  font-weight: 700;
}

.cost-simulation-table .low-value {
  color: #c62828;
}

.cost-breakeven-box {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 2px solid #4caf50;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  text-align: center;
}

.cost-breakeven-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: var(--spacing-md);
}

.cost-breakeven-number {
  font-size: 3rem;
  font-weight: 700;
  color: #1b5e20;
  margin-bottom: var(--spacing-sm);
}

.cost-breakeven-desc {
  color: var(--color-text-muted);
}

/* --- PDF購入先リスト --- */
.pdf-vendor-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.pdf-vendor-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 2px solid transparent;
  transition: all var(--transition-normal);
}

.pdf-vendor-card:hover {
  border-color: var(--color-secondary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pdf-vendor-header {
  background: linear-gradient(135deg, #0277bd, #0288d1);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.pdf-vendor-name {
  font-weight: 700;
  font-size: 1.1rem;
}

.pdf-vendor-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  margin-left: auto;
}

.pdf-vendor-body {
  padding: var(--spacing-lg);
}

.pdf-vendor-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md) 0;
}

.pdf-vendor-features li {
  padding: var(--spacing-xs) 0;
  padding-left: 1.5em;
  position: relative;
  font-size: 0.9rem;
}

.pdf-vendor-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
}

/* --- 三層ポートフォリオ視覚化 --- */
.portfolio-layers {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: var(--spacing-xl) 0;
}

.portfolio-layer {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
}

.portfolio-layer-badge {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  padding: var(--spacing-md);
  text-align: center;
}

.portfolio-layer--core .portfolio-layer-badge {
  background: linear-gradient(135deg, #1565c0, #1976d2);
}

.portfolio-layer--utility .portfolio-layer-badge {
  background: linear-gradient(135deg, #43a047, #66bb6a);
}

.portfolio-layer--flow .portfolio-layer-badge {
  background: linear-gradient(135deg, #ff8f00, #ffa726);
}

.portfolio-layer-label {
  font-size: 0.75rem;
  opacity: 0.9;
  margin-top: var(--spacing-xs);
}

.portfolio-layer-content {
  flex: 1;
  padding: var(--spacing-lg);
}

.portfolio-layer-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.portfolio-layer-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.portfolio-layer-tag {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.85rem;
}

/* --- フェーズ別推奨カード --- */
.phase-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.phase-recommendation-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 2px solid transparent;
  transition: all var(--transition-normal);
}

.phase-recommendation-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-secondary);
}

.phase-recommendation-header {
  padding: var(--spacing-lg);
  text-align: center;
  color: white;
}

.phase-recommendation-card--deepdive .phase-recommendation-header {
  background: linear-gradient(135deg, #5d4037, #795548);
}

.phase-recommendation-card--implement .phase-recommendation-header {
  background: linear-gradient(135deg, #0277bd, #0288d1);
}

.phase-recommendation-card--quickscan .phase-recommendation-header {
  background: linear-gradient(135deg, #7b1fa2, #9c27b0);
}

.phase-recommendation-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.phase-recommendation-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.phase-recommendation-media {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-top: var(--spacing-xs);
}

.phase-recommendation-body {
  padding: var(--spacing-lg);
}

.phase-recommendation-scenario {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: 0.9rem;
}

.phase-recommendation-scenario-label {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.8rem;
  margin-bottom: var(--spacing-xs);
}

/* --- 技術書記事 レスポンシブ対応 --- */
@media (max-width: 768px) {
  .flowchart-branches {
    flex-direction: column;
    align-items: center;
  }

  .flowchart-branch {
    max-width: 100%;
  }

  .comparison-matrix {
    display: block;
    overflow-x: auto;
  }

  .portfolio-layer {
    flex-direction: column;
  }

  .portfolio-layer-badge {
    width: 100%;
    flex-direction: row;
    gap: var(--spacing-sm);
  }

  .portfolio-layer-label {
    margin-top: 0;
  }

  .phase-recommendation-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   PDFソフト比較記事 専用スタイル
   =================================================== */

/* --- マスター比較表 --- */
.master-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-size: 0.9rem;
}

.master-comparison-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
  position: sticky;
  top: 0;
  z-index: 10;
}

.master-comparison-table th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}

.master-comparison-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.master-comparison-table tbody tr:nth-child(even) {
  background: var(--color-bg);
}

.master-comparison-table tbody tr:hover {
  background: #e3f2fd;
}

.master-comparison-table .product-name-cell {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

/* --- 価格帯バッジ --- */
.price-tier {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.price-tier--free {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}

.price-tier--low {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

.price-tier--mid {
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffe082;
}

.price-tier--high {
  background: #fce4ec;
  color: #c2185b;
  border: 1px solid #f8bbd9;
}

/* --- ライセンスタイプ表示 --- */
.license-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

.license-type--perpetual {
  background: #e8f5e9;
  color: #1b5e20;
}

.license-type--subscription {
  background: #e3f2fd;
  color: #0d47a1;
}

.license-type--freemium {
  background: #f3e5f5;
  color: #6a1b9a;
}

/* --- 電子印鑑レベル表示 --- */
.hanko-level {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin: var(--spacing-md) 0;
}

.hanko-level--stamp {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #ff9800;
}

.hanko-level--secure {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 2px solid #4caf50;
}

.hanko-level-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.hanko-level-content {
  flex: 1;
}

.hanko-level-title {
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.hanko-level-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* --- コスト比較チャート --- */
.cost-breakdown {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.cost-breakdown-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.cost-comparison-row {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.cost-comparison-item {
  flex: 1;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
}

.cost-item-label {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.cost-item-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary);
}

.cost-item-period {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.cost-breakeven {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
}

.cost-breakeven-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.cost-breakeven-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* --- ベンダー情報カード --- */
.vendor-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-lg) 0;
  transition: all var(--transition-normal);
}

.vendor-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
}

.vendor-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.vendor-card-rank {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.vendor-card-title-group {
  flex: 1;
}

.vendor-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.vendor-card-tagline {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.vendor-card-price-badge {
  text-align: right;
}

.vendor-card-body {
  margin-bottom: var(--spacing-lg);
}

.vendor-card-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.vendor-card-feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.9rem;
}

.vendor-card-feature-icon {
  color: var(--color-success);
}

.vendor-card-verdict {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.vendor-card-verdict-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.vendor-card-verdict-text {
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- 判定アイコン --- */
.verdict-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
}

.verdict-icon--excellent {
  background: #4caf50;
  color: white;
}

.verdict-icon--good {
  background: #8bc34a;
  color: white;
}

.verdict-icon--fair {
  background: #ffc107;
  color: #333;
}

.verdict-icon--poor {
  background: #f44336;
  color: white;
}

.verdict-icon--na {
  background: #9e9e9e;
  color: white;
}

/* --- トップ3サマリー --- */
.top3-summary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  color: var(--color-text-light);
}

.top3-summary-title {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.top3-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.top3-summary-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  backdrop-filter: blur(10px);
}

.top3-summary-rank {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: var(--spacing-xs);
}

.top3-summary-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.top3-summary-desc {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* --- ユースケース別推奨カード --- */
.usecase-recommendation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.usecase-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: all var(--transition-normal);
}

.usecase-card:hover {
  border-color: var(--color-secondary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.usecase-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}

.usecase-card-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.usecase-card-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.usecase-card-recommendation {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.usecase-card-recommendation-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.usecase-card-recommendation-product {
  font-weight: 700;
  color: var(--color-secondary);
}

/* --- 機能チェックリスト --- */
.feature-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.feature-check-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.feature-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.feature-check-icon--yes {
  background: #4caf50;
  color: white;
}

.feature-check-icon--no {
  background: #f44336;
  color: white;
}

.feature-check-icon--partial {
  background: #ff9800;
  color: white;
}

/* --- PDFソフト比較記事 レスポンシブ対応 --- */
@media (max-width: 768px) {
  .master-comparison-table {
    display: block;
    overflow-x: auto;
  }

  .cost-comparison-row {
    flex-direction: column;
  }

  .vendor-card-header {
    flex-direction: column;
    text-align: center;
  }

  .vendor-card-price-badge {
    text-align: center;
  }

  .top3-summary-grid {
    grid-template-columns: 1fr;
  }

  .usecase-recommendation {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   iPad・Android 2台持ち記事 専用スタイル
   =================================================== */

/* --- ワークフロー図 --- */
.workflow-diagram {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.workflow-diagram-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.workflow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-md);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  border-radius: var(--radius-md);
  min-width: 100px;
  transition: transform var(--transition-fast);
}

.workflow-step:hover {
  transform: scale(1.05);
}

.workflow-step-icon {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-xs);
}

.workflow-step-label {
  font-size: 0.85rem;
  font-weight: 600;
}

.workflow-step-device {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-top: var(--spacing-xs);
}

.workflow-arrow {
  font-size: 1.5rem;
  color: var(--color-text-muted);
}

/* --- アプリ同期カード --- */
.app-sync-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--spacing-lg) 0;
  transition: all var(--transition-normal);
}

.app-sync-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
}

.app-sync-card-header {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  color: var(--color-text-light);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.app-sync-card-header--zotero {
  background: linear-gradient(135deg, #cc2936 0%, #e53935 100%);
}

.app-sync-card-header--paperpile {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
}

.app-sync-card-header--obsidian {
  background: linear-gradient(135deg, #6c3483 0%, #8e44ad 100%);
}

.app-sync-card-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.app-sync-card-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.app-sync-card-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
}

.app-sync-card-body {
  padding: var(--spacing-lg);
}

.app-sync-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.app-sync-platform {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.app-sync-platform-icon {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-xs);
}

.app-sync-platform-name {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.app-sync-platform-status {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.app-sync-platform-status--good {
  background: #e8f5e9;
  color: #2e7d32;
}

.app-sync-platform-status--limited {
  background: #fff8e1;
  color: #f57f17;
}

.app-sync-platform-status--beta {
  background: #fce4ec;
  color: #c2185b;
}

/* --- デバイス役割分担 --- */
.device-role-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-md);
  align-items: stretch;
  margin: var(--spacing-xl) 0;
}

.device-role-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
}

.device-role-card--ipad {
  border-color: #333;
}

.device-role-card--android {
  border-color: #3ddc84;
}

.device-role-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
}

.device-role-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.device-role-subtitle {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.device-role-tasks {
  text-align: left;
}

.device-role-task {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--color-border);
}

.device-role-task:last-child {
  border-bottom: none;
}

.device-role-task-icon {
  color: var(--color-success);
}

.device-role-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.device-role-divider-icon {
  font-size: 2rem;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
}

.device-role-divider-text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  writing-mode: vertical-rl;
}

/* --- 設定チュートリアル --- */
.setup-tutorial {
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.setup-tutorial-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--color-border);
}

.setup-tutorial-icon {
  font-size: 2rem;
  color: var(--color-primary);
}

.setup-tutorial-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.setup-tutorial-steps {
  counter-reset: setup-step;
}

.setup-tutorial-step {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.setup-tutorial-step::before {
  counter-increment: setup-step;
  content: counter(setup-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}

.setup-tutorial-step-content {
  flex: 1;
}

.setup-tutorial-step-title {
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.setup-tutorial-step-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.setup-tutorial-code {
  background: #263238;
  color: #aed581;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-sm);
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  overflow-x: auto;
}

/* --- アスペクト比比較 --- */
.aspect-ratio-comparison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.aspect-ratio-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
}

.aspect-ratio-visual {
  background: #f5f5f5;
  border: 2px dashed var(--color-border);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.aspect-ratio-visual--4-3 {
  aspect-ratio: 4/3;
}

.aspect-ratio-visual--16-10 {
  aspect-ratio: 16/10;
}

.aspect-ratio-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.aspect-ratio-device {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.aspect-ratio-verdict {
  font-size: 0.85rem;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
}

.aspect-ratio-verdict--optimal {
  background: #e8f5e9;
  color: #2e7d32;
}

.aspect-ratio-verdict--suboptimal {
  background: #fff8e1;
  color: #f57f17;
}

/* --- コスト比較表 --- */
.cost-comparison-table {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--spacing-xl) 0;
}

.cost-comparison-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
  padding: var(--spacing-lg);
  text-align: center;
}

.cost-comparison-header-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.cost-comparison-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.cost-comparison-option {
  padding: var(--spacing-xl);
  border-right: 1px solid var(--color-border);
}

.cost-comparison-option:last-child {
  border-right: none;
}

.cost-comparison-option-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.cost-comparison-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--color-border);
}

.cost-comparison-item:last-child {
  border-bottom: none;
}

.cost-comparison-total {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  text-align: center;
}

.cost-comparison-total-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.cost-comparison-total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary);
}

/* --- 同期戦略マトリクス --- */
.sync-strategy-matrix {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-xl) 0;
}

.sync-strategy-matrix thead {
  background: linear-gradient(135deg, #6c3483 0%, #8e44ad 100%);
  color: var(--color-text-light);
}

.sync-strategy-matrix th,
.sync-strategy-matrix td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.sync-strategy-matrix tbody tr:hover {
  background: #f3e5f5;
}

.sync-strategy-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.sync-strategy-badge--recommended {
  background: #e8f5e9;
  color: #2e7d32;
}

.sync-strategy-badge--advanced {
  background: #e3f2fd;
  color: #1565c0;
}

.sync-strategy-badge--basic {
  background: #fff8e1;
  color: #f57f17;
}

/* --- iPad・Android記事 レスポンシブ対応 --- */
@media (max-width: 768px) {
  .workflow-steps {
    flex-direction: column;
  }

  .workflow-arrow {
    transform: rotate(90deg);
  }

  .device-role-split {
    grid-template-columns: 1fr;
  }

  .device-role-divider {
    flex-direction: row;
  }

  .device-role-divider-text {
    writing-mode: horizontal-tb;
  }

  .aspect-ratio-comparison {
    grid-template-columns: 1fr;
  }

  .cost-comparison-body {
    grid-template-columns: 1fr;
  }

  .cost-comparison-option {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .app-sync-platform-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   紙の本 vs 電子書籍 vs オーディオブック比較記事 専用スタイル
   =================================================== */

/* --- 9:1 黄金比率ボックス（結論強調） --- */
.golden-ratio-box {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  color: var(--color-text-light);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.golden-ratio-box::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }
}

.golden-ratio-box>* {
  position: relative;
  z-index: 1;
}

.golden-ratio-title {
  font-size: 1.1rem;
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: var(--spacing-sm);
}

.golden-ratio-number {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-md);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.golden-ratio-label {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.golden-ratio-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  padding: var(--spacing-sm) var(--spacing-lg);
}

.golden-ratio-icon {
  font-size: 1.5rem;
}

.golden-ratio-text {
  font-weight: 600;
}

/* --- 脳科学エビデンスボックス --- */
.brain-science-box {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border: 2px solid #9c27b0;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.brain-science-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px dashed #9c27b0;
}

.brain-science-icon {
  font-size: 2.5rem;
}

.brain-science-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #6a1b9a;
}

.brain-science-subtitle {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.brain-science-body {
  display: grid;
  gap: var(--spacing-lg);
}

.brain-science-study {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.brain-science-study-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.brain-science-study-year {
  background: #9c27b0;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
}

.brain-science-study-source {
  font-weight: 600;
  color: var(--color-primary);
}

.brain-science-study-finding {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* --- 3者比較ヒートマップマトリクス --- */
.reading-comparison-matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin: var(--spacing-xl) 0;
}

.reading-comparison-matrix thead {
  background: linear-gradient(135deg, #37474f 0%, #455a64 100%);
  color: var(--color-text-light);
}

.reading-comparison-matrix th {
  padding: var(--spacing-lg);
  font-weight: 600;
  text-align: center;
  font-size: 1rem;
}

.reading-comparison-matrix th:first-child {
  text-align: left;
  padding-left: var(--spacing-xl);
}

.reading-comparison-matrix td {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.reading-comparison-matrix td:first-child {
  text-align: left;
  font-weight: 600;
  background: #fafafa;
  padding-left: var(--spacing-xl);
}

.reading-comparison-matrix tbody tr:hover {
  background: #f5f5f5;
}

.reading-comparison-matrix tbody tr:hover td:first-child {
  background: #eeeeee;
}

/* ヒートマップセル */
.heatmap-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
}

.heatmap-cell--5 {
  background: #1b5e20;
  color: white;
}

.heatmap-cell--4 {
  background: #4caf50;
  color: white;
}

.heatmap-cell--3 {
  background: #ffc107;
  color: #333;
}

.heatmap-cell--2 {
  background: #ff9800;
  color: white;
}

.heatmap-cell--1 {
  background: #f44336;
  color: white;
}

/* --- リセールバリュー分析テーブル --- */
.resale-analysis-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-xl) 0;
}

.resale-analysis-table thead {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
  color: var(--color-text-light);
}

.resale-analysis-table th,
.resale-analysis-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.resale-analysis-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.resale-analysis-table tbody tr:nth-child(even) {
  background: #e3f2fd;
}

.resale-analysis-table tbody tr:hover {
  background: #bbdefb;
}

.resale-positive {
  color: #2e7d32;
  font-weight: 700;
}

.resale-neutral {
  color: #f57f17;
  font-weight: 600;
}

.resale-negative {
  color: #c62828;
  font-weight: 600;
}

.recovery-rate {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
}

.recovery-rate--high {
  background: #e8f5e9;
  color: #1b5e20;
}

.recovery-rate--medium {
  background: #fff8e1;
  color: #f57f17;
}

.recovery-rate--low {
  background: #ffebee;
  color: #c62828;
}

/* --- オーディオブック機能カード --- */
.audiobook-feature-card {
  background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  color: var(--color-text-light);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.audiobook-feature-icon {
  font-size: 5rem;
  text-align: center;
}

.audiobook-feature-content h4 {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
}

.audiobook-feature-content p {
  opacity: 0.9;
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

.audiobook-setup-steps {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.audiobook-setup-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}

.audiobook-setup-step:last-child {
  border-bottom: none;
}

.audiobook-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- ジャンル別使い分けガイド --- */
.genre-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.genre-guide-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.genre-guide-card:hover {
  border-color: var(--color-secondary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.genre-guide-header {
  padding: var(--spacing-lg);
  color: var(--color-text-light);
  text-align: center;
}

.genre-guide-card--paper .genre-guide-header {
  background: linear-gradient(135deg, #5d4037 0%, #795548 100%);
}

.genre-guide-card--kindle .genre-guide-header {
  background: linear-gradient(135deg, #0277bd 0%, #0288d1 100%);
}

.genre-guide-card--audible .genre-guide-header {
  background: linear-gradient(135deg, #ff6f00 0%, #ff8f00 100%);
}

.genre-guide-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.genre-guide-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.genre-guide-body {
  padding: var(--spacing-lg);
}

.genre-guide-recommendation {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
}

.genre-guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.genre-guide-list li {
  padding: var(--spacing-sm) 0;
  padding-left: 1.5em;
  position: relative;
  font-size: 0.95rem;
  border-bottom: 1px dashed var(--color-border);
}

.genre-guide-list li:last-child {
  border-bottom: none;
}

.genre-guide-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
}

/* --- 読書比較記事 レスポンシブ対応 --- */
@media (max-width: 768px) {
  .golden-ratio-number {
    font-size: 2.5rem;
  }

  .golden-ratio-label {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .audiobook-feature-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .reading-comparison-matrix {
    display: block;
    overflow-x: auto;
  }

  .resale-analysis-table {
    display: block;
    overflow-x: auto;
  }

  .genre-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   オフィスチェアラボ記事 専用スタイル
   =================================================== */

/* --- 人間工学ダイアグラム --- */
.ergonomics-diagram {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.ergonomics-diagram-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px dashed var(--color-secondary);
}

.ergonomics-diagram-icon {
  font-size: 2.5rem;
}

.ergonomics-diagram-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.ergonomics-diagram-subtitle {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.ergonomics-angle-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.ergonomics-angle-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.ergonomics-angle-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.ergonomics-angle-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.ergonomics-angle-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
}

.ergonomics-angle-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* --- 体圧分散ヒートマップ表現 --- */
.pressure-map-visual {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.pressure-map-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.pressure-map-header-icon {
  font-size: 2rem;
}

.pressure-map-header-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.pressure-map-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.pressure-map-item {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.pressure-map-item-title {
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.pressure-zone-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
}

.pressure-zone--high {
  background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
  color: white;
}

.pressure-zone--medium {
  background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
  color: #333;
}

.pressure-zone--low {
  background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%);
  color: white;
}

/* --- 素材工学カード（ウレタン・メッシュ） --- */
.material-science-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--spacing-xl) 0;
}

.material-science-header {
  background: linear-gradient(135deg, #5d4037 0%, #795548 100%);
  color: var(--color-text-light);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.material-science-icon {
  font-size: 2rem;
}

.material-science-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.material-science-body {
  padding: var(--spacing-xl);
}

.material-density-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-md);
}

.material-density-table thead {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.material-density-table th,
.material-density-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.material-density-table tbody tr:hover {
  background: #f5f5f5;
}

.density-grade {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}

.density-grade--low {
  background: #ffebee;
  color: #c62828;
}

.density-grade--standard {
  background: #fff8e1;
  color: #f57f17;
}

.density-grade--high {
  background: #e8f5e9;
  color: #2e7d32;
}

.density-grade--premium {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  color: white;
}

/* --- B2B/研究室用チェア機能グリッド --- */
.lab-chair-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.lab-chair-feature-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.lab-chair-feature-card:hover {
  border-color: var(--color-secondary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.lab-chair-feature-header {
  padding: var(--spacing-lg);
  color: var(--color-text-light);
  text-align: center;
}

.lab-chair-feature-card--esd .lab-chair-feature-header {
  background: linear-gradient(135deg, #ff5722 0%, #f4511e 100%);
}

.lab-chair-feature-card--cleanroom .lab-chair-feature-header {
  background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
}

.lab-chair-feature-card--height .lab-chair-feature-header {
  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
}

.lab-chair-feature-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.lab-chair-feature-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.lab-chair-feature-body {
  padding: var(--spacing-lg);
}

.lab-chair-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lab-chair-spec-list li {
  padding: var(--spacing-sm) 0;
  padding-left: 1.5em;
  position: relative;
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--color-border);
}

.lab-chair-spec-list li:last-child {
  border-bottom: none;
}

.lab-chair-spec-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
}

/* --- ESD・クリーンルームバッジ --- */
.esd-cleanroom-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
}

.esd-cleanroom-badge--esd {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #ff9800;
  color: #e65100;
}

.esd-cleanroom-badge--cleanroom {
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
  border: 2px solid #00bcd4;
  color: #006064;
}

.esd-cleanroom-badge--class {
  background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%);
  border: 2px solid #673ab7;
  color: #4527a0;
}

/* --- 分解手順ステップ --- */
.disassembly-guide {
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.disassembly-guide-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px dashed var(--color-border);
}

.disassembly-guide-icon {
  font-size: 2rem;
}

.disassembly-guide-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.disassembly-steps {
  counter-reset: disassembly-step;
}

.disassembly-step {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--color-border);
}

.disassembly-step:last-child {
  border-bottom: none;
}

.disassembly-step-number {
  counter-increment: disassembly-step;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.disassembly-step-number::before {
  content: counter(disassembly-step);
}

.disassembly-step-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.disassembly-step-content p {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}

.disassembly-warning {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  border: 2px solid #dc3545;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.disassembly-warning-icon {
  color: #dc3545;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.disassembly-warning-text {
  font-size: 0.85rem;
  color: #c62828;
  line-height: 1.6;
}

/* --- TCO比較表 --- */
.tco-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-xl) 0;
}

.tco-comparison-table thead {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
  color: var(--color-text-light);
}

.tco-comparison-table th,
.tco-comparison-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.tco-comparison-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.tco-comparison-table tbody tr:nth-child(even) {
  background: #e3f2fd;
}

.tco-comparison-table tbody tr:hover {
  background: #bbdefb;
}

.tco-value--positive {
  color: #2e7d32;
  font-weight: 700;
}

.tco-value--neutral {
  color: #f57f17;
  font-weight: 600;
}

.tco-value--negative {
  color: #c62828;
  font-weight: 600;
}

/* --- 製品ランキングカード --- */
.product-ranking-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--spacing-xl) 0;
  transition: all var(--transition-normal);
}

.product-ranking-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
}

.product-ranking-card--1st {
  border-color: #ffc107;
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
}

.product-ranking-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-bg);
}

.product-ranking-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-text-light);
  flex-shrink: 0;
}

.product-ranking-badge--1st {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.product-ranking-badge--2nd {
  background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
}

.product-ranking-badge--3rd {
  background: linear-gradient(135deg, #8d6e63 0%, #6d4c41 100%);
}

.product-ranking-badge--other {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.product-ranking-info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.product-ranking-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-secondary);
}

.product-ranking-body {
  padding: var(--spacing-xl);
}

.product-ranking-scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.product-score-item {
  text-align: center;
  padding: var(--spacing-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.product-score-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
}

.product-score-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.product-ranking-verdict {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.product-ranking-verdict h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.product-ranking-verdict p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

/* --- 科研費購入ガイドボックス --- */
.kakenhi-purchase-guide {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 2px solid #4caf50;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.kakenhi-guide-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px dashed #4caf50;
}

.kakenhi-guide-icon {
  font-size: 2rem;
}

.kakenhi-guide-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2e7d32;
}

.kakenhi-threshold-box {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.kakenhi-threshold-value {
  font-size: 2rem;
  font-weight: 700;
  color: #c62828;
}

.kakenhi-threshold-label {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.6;
}

.kakenhi-template-box {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.kakenhi-template-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.kakenhi-template-content {
  background: #f5f5f5;
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  font-size: 0.875rem;
  line-height: 1.8;
  white-space: pre-wrap;
  font-family: var(--font-main);
}

/* --- オフィスチェア記事 レスポンシブ対応 --- */
@media (max-width: 768px) {
  .ergonomics-angle-cards {
    grid-template-columns: 1fr;
  }

  .pressure-map-grid {
    grid-template-columns: 1fr;
  }

  .lab-chair-feature-grid {
    grid-template-columns: 1fr;
  }

  .product-ranking-header {
    flex-direction: column;
    text-align: center;
  }

  .product-ranking-scores {
    grid-template-columns: repeat(2, 1fr);
  }

  .kakenhi-threshold-box {
    flex-direction: column;
    text-align: center;
  }

  .disassembly-step {
    flex-direction: column;
    align-items: flex-start;
  }

  .tco-comparison-table {
    display: block;
    overflow-x: auto;
  }

  .material-density-table {
    display: block;
    overflow-x: auto;
  }
}

/* ===================================================
   スタンディングデスク・ラボ 専用コンポーネント
   Standing Desk Lab Specific Components
   =================================================== */

/* --- 科学的エビデンス研究ボックス --- */
.evidence-research-box {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid #1565c0;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.evidence-research-box::before {
  content: "📊";
  position: absolute;
  top: -15px;
  left: 20px;
  background: var(--color-bg-card);
  padding: 0 var(--spacing-sm);
  font-size: 1.5rem;
}

.evidence-research-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.evidence-research-institution {
  font-size: 0.85rem;
  color: #1565c0;
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(21, 101, 192, 0.1);
  border-radius: 20px;
}

.evidence-research-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.evidence-research-findings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.evidence-finding-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.evidence-finding-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1565c0;
  line-height: 1.2;
}

.evidence-finding-unit {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.evidence-finding-label {
  font-size: 0.9rem;
  color: var(--color-text);
  margin-top: var(--spacing-sm);
}

/* --- 代謝インパクト可視化表 --- */
.metabolism-impact-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: var(--spacing-xl) 0;
}

.metabolism-impact-table thead {
  background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
  color: var(--color-text-light);
}

.metabolism-impact-table th,
.metabolism-impact-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.metabolism-impact-table tbody tr:hover {
  background: #e8f5e9;
}

.metabolism-highlight {
  background: #c8e6c9;
  font-weight: 700;
  color: #1b5e20;
}

.metabolism-equivalent {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* --- 習熟曲線（Habituation Curve）--- */
.habituation-curve {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.habituation-curve-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.habituation-phases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

.habituation-phase {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
  position: relative;
  transition: all var(--transition-normal);
}

.habituation-phase:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.habituation-phase--honeymoon {
  border-left: 4px solid #4caf50;
}

.habituation-phase--despair {
  border-left: 4px solid #f44336;
}

.habituation-phase--adaptation {
  border-left: 4px solid #ff9800;
}

.habituation-phase--habit {
  border-left: 4px solid #2196f3;
}

.habituation-phase-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

.habituation-phase-name {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.habituation-phase-period {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.habituation-phase-desc {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.6;
}

.habituation-result {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  text-align: center;
}

.habituation-result-number {
  font-size: 3rem;
  font-weight: 700;
}

.habituation-result-label {
  font-size: 1rem;
  opacity: 0.9;
}

/* --- 人間工学計算ツール --- */
.ergonomic-calculator {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #ff9800;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.ergonomic-calculator-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #e65100;
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.ergonomic-formula {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  font-family: 'Courier New', monospace;
  text-align: center;
  font-size: 1.1rem;
}

.ergonomic-formula-highlight {
  color: #e65100;
  font-weight: 700;
}

.ergonomic-height-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ergonomic-height-table th,
.ergonomic-height-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.ergonomic-height-table thead {
  background: #ff9800;
  color: var(--color-text-light);
}

.ergonomic-height-table tbody tr:hover {
  background: #fff8e1;
}

/* --- 製品クラス別推奨カード --- */
.desk-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.desk-class-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.desk-class-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.desk-class-header {
  padding: var(--spacing-lg);
  color: var(--color-text-light);
  text-align: center;
}

.desk-class-card--s .desk-class-header {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.desk-class-card--a .desk-class-header {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
}

.desk-class-card--b .desk-class-header {
  background: linear-gradient(135deg, #388e3c 0%, #43a047 100%);
}

.desk-class-card--c .desk-class-header {
  background: linear-gradient(135deg, #616161 0%, #757575 100%);
}

.desk-class-rank {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.desk-class-price {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-top: var(--spacing-xs);
}

.desk-class-body {
  padding: var(--spacing-lg);
}

.desk-class-target {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px dashed var(--color-border);
}

.desk-class-products {
  list-style: none;
  padding: 0;
  margin: 0;
}

.desk-class-products li {
  padding: var(--spacing-sm) 0;
  padding-left: 1.5em;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.desk-class-products li:last-child {
  border-bottom: none;
}

.desk-class-products li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
}

/* --- 静脈瘤リスク警告 --- */
.vein-risk-warning {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  border: 2px solid #c62828;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.vein-risk-warning::before {
  content: "⚠️";
  position: absolute;
  top: -15px;
  left: 20px;
  background: var(--color-bg-card);
  padding: 0 var(--spacing-sm);
  font-size: 1.5rem;
}

.vein-risk-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #c62828;
  margin-bottom: var(--spacing-md);
}

.vein-risk-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.vein-risk-stat {
  flex: 1;
  min-width: 150px;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
}

.vein-risk-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #c62828;
}

.vein-risk-stat-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.vein-risk-solution {
  background: #e8f5e9;
  border: 2px solid #4caf50;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.vein-risk-solution-title {
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: var(--spacing-sm);
}

/* --- Sit-Standプロトコル表 --- */
.sit-stand-protocol {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.sit-stand-protocol-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.sit-stand-protocol-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
}

.sit-stand-protocol-table thead {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.sit-stand-protocol-table th,
.sit-stand-protocol-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.sit-stand-protocol-table tbody tr:nth-child(even) {
  background: var(--color-bg);
}

.sit-stand-ratio {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
}

.sit-stand-ratio--equal {
  background: #e3f2fd;
  color: #1565c0;
}

.sit-stand-ratio--sit-heavy {
  background: #fff3e0;
  color: #e65100;
}

.sit-stand-protocol-note {
  background: #e8f5e9;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-size: 0.9rem;
  color: #2e7d32;
  text-align: center;
}

/* --- ブランド別比較表 --- */
.brand-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-size: 0.9rem;
  margin: var(--spacing-xl) 0;
}

.brand-comparison-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
}

.brand-comparison-table th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
}

.brand-comparison-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.brand-comparison-table .brand-name-cell {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.brand-comparison-table tbody tr:hover {
  background: #e3f2fd;
}

.brand-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.brand-badge--premium {
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: white;
}

.brand-badge--value {
  background: #4caf50;
  color: white;
}

.brand-badge--japan {
  background: #e91e63;
  color: white;
}

/* --- スタンディングデスク記事 レスポンシブ --- */
@media (max-width: 768px) {
  .evidence-research-findings {
    grid-template-columns: 1fr;
  }

  .habituation-phases {
    flex-direction: column;
    align-items: center;
  }

  .habituation-phase {
    max-width: 100%;
  }

  .habituation-result-number {
    font-size: 2rem;
  }

  .vein-risk-stats {
    flex-direction: column;
  }

  .desk-class-grid {
    grid-template-columns: 1fr;
  }

  .metabolism-impact-table,
  .ergonomic-height-table,
  .sit-stand-protocol-table,
  .brand-comparison-table {
    display: block;
    overflow-x: auto;
  }
}


/* ===================================================
   Mac研究者ソフト記事専用コンポーネント
   =================================================== */

/* --- 研究ワークフロー図 --- */
.research-workflow {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.research-workflow-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.research-workflow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.research-workflow-step {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 120px;
  font-weight: 600;
}

.research-workflow-arrow {
  font-size: 1.5rem;
  color: var(--color-secondary);
}

/* --- ツール比較マトリクス --- */
.tool-comparison-matrix {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-lg) 0;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.tool-comparison-matrix thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
}

.tool-comparison-matrix th {
  padding: var(--spacing-md);
  text-align: center;
  font-weight: 600;
}

.tool-comparison-matrix td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.tool-comparison-matrix .tool-name {
  text-align: left;
  font-weight: 600;
  color: var(--color-primary);
}

.tool-comparison-matrix .recommend-row {
  background: #e8f5e9;
}

.tool-comparison-matrix .score-excellent {
  color: #1b5e20;
  font-weight: 700;
}

.tool-comparison-matrix .score-good {
  color: #388e3c;
}

.tool-comparison-matrix .score-average {
  color: #f57c00;
}

.tool-comparison-matrix .score-poor {
  color: #c62828;
}

/* --- AIプロンプトボックス --- */
.ai-prompt-box {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #0f3460;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-lg) 0;
  color: var(--color-text-light);
}

.ai-prompt-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.ai-prompt-icon {
  font-size: 2rem;
}

.ai-prompt-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.ai-prompt-content {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9rem;
  line-height: 1.7;
  white-space: pre-wrap;
  margin-bottom: var(--spacing-md);
}

.ai-prompt-usage {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* --- 研究フェーズカード --- */
.research-phase-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.research-phase-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.research-phase-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.research-phase-header {
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text-light);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.research-phase-header--input {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
}

.research-phase-header--process {
  background: linear-gradient(135deg, #6a1b9a 0%, #7b1fa2 100%);
}

.research-phase-header--output {
  background: linear-gradient(135deg, #2e7d32 0%, #388e3c 100%);
}

.research-phase-header--ai {
  background: linear-gradient(135deg, #c62828 0%, #d32f2f 100%);
}

.research-phase-body {
  padding: var(--spacing-lg);
}

.research-phase-tools {
  list-style: none;
  padding: 0;
  margin: 0;
}

.research-phase-tools li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.research-phase-tools li:last-child {
  border-bottom: none;
}

.research-phase-tool-name {
  font-weight: 600;
}

.research-phase-tool-price {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.research-phase-tool-price.free {
  color: var(--color-success);
  font-weight: 600;
}

/* --- ランチャー比較カード --- */
.launcher-comparison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.launcher-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: all var(--transition-normal);
}

.launcher-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-lg);
}

.launcher-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.launcher-card-icon {
  font-size: 2.5rem;
}

.launcher-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.launcher-card-verdict {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* --- ハードウェア連携カード --- */
.hardware-setup {
  background: linear-gradient(135deg, #263238 0%, #37474f 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  color: var(--color-text-light);
}

.hardware-setup-title {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.hardware-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.hardware-setup-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
}

.hardware-setup-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.hardware-setup-name {
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

.hardware-setup-desc {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* --- 文献管理ツール詳細比較 --- */
.reference-manager-detail {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
  overflow: hidden;
}

.reference-manager-header {
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.reference-manager-header--zotero {
  background: linear-gradient(135deg, #cc2936 0%, #e53935 100%);
  color: var(--color-text-light);
}

.reference-manager-header--endnote {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
  color: var(--color-text-light);
}

.reference-manager-header--mendeley {
  background: linear-gradient(135deg, #b71c1c 0%, #c62828 100%);
  color: var(--color-text-light);
}

.reference-manager-logo {
  font-size: 2.5rem;
}

.reference-manager-name {
  font-size: 1.5rem;
  font-weight: 700;
}

.reference-manager-body {
  padding: var(--spacing-lg);
}

.reference-manager-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.reference-manager-pros,
.reference-manager-cons {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.reference-manager-pros {
  background: #e8f5e9;
}

.reference-manager-cons {
  background: #ffebee;
}

.reference-manager-pros h4 {
  color: #2e7d32;
  margin-bottom: var(--spacing-sm);
}

.reference-manager-cons h4 {
  color: #c62828;
  margin-bottom: var(--spacing-sm);
}

/* --- Mac研究者ソフト レスポンシブ対応 --- */
@media (max-width: 768px) {
  .research-workflow-steps {
    flex-direction: column;
  }

  .research-workflow-arrow {
    transform: rotate(90deg);
  }

  .launcher-comparison {
    grid-template-columns: 1fr;
  }

  .reference-manager-pros-cons {
    grid-template-columns: 1fr;
  }

  .hardware-setup-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================
   科研費・学会宿泊費記事用スタイル
   =================================================== */

/* --- 地域区分テーブル（横スクロール対応） --- */
.region-classification-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-size: 0.9rem;
}

.region-classification-table thead {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
}

.region-classification-table th,
.region-classification-table td {
  padding: var(--spacing-md);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.region-classification-table .region-name {
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.region-classification-table .price-highlight {
  background: #e8f5e9;
  font-weight: 700;
  color: #2e7d32;
}

.region-classification-table .price-warning {
  background: #fff3e0;
  font-weight: 700;
  color: #e65100;
}

/* --- 都市別価格比較チャート --- */
.city-price-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.city-price-card {
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  transition: all var(--transition-normal);
}

.city-price-card:hover {
  border-color: var(--color-secondary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.city-price-card--crisis {
  border-color: #f44336;
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.city-price-card--warning {
  border-color: #ff9800;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.city-price-card--safe {
  border-color: #4caf50;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.city-price-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.city-price-value {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.city-price-card--crisis .city-price-value {
  color: #c62828;
}

.city-price-card--warning .city-price-value {
  color: #e65100;
}

.city-price-card--safe .city-price-value {
  color: #2e7d32;
}

.city-price-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- 理由書テンプレートボックス --- */
.reason-template-box {
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
  position: relative;
}

.reason-template-box::before {
  content: "📋 コピペ可能";
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--color-success);
  color: var(--color-text-light);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.reason-template-content {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  font-size: 0.95rem;
  line-height: 2;
  white-space: pre-wrap;
}

.reason-template-label {
  font-weight: 700;
  color: var(--color-primary);
}

/* --- 改定タイムライン --- */
.reform-timeline {
  position: relative;
  padding-left: 30px;
  margin: var(--spacing-xl) 0;
}

.reform-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: var(--spacing-lg);
  padding-left: var(--spacing-lg);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: var(--color-secondary);
  border: 3px solid var(--color-bg-card);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.timeline-item--current::before {
  background: var(--color-success);
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
  }
}

.timeline-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-xs);
}

.timeline-content {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

/* --- 計算例ボックス --- */
.calculation-example {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid #1565c0;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.calculation-example-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0d47a1;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.calculation-step {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calculation-result {
  background: var(--color-primary);
  color: var(--color-text-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.calculation-result--warning {
  background: linear-gradient(135deg, #f44336 0%, #c62828 100%);
}

/* --- 旅費レスポンシブ対応 --- */
@media (max-width: 768px) {
  .city-price-comparison {
    grid-template-columns: 1fr;
  }

  .region-classification-table {
    display: block;
    overflow-x: auto;
  }

  .calculation-step {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }
}