スケルトンローディング（Skeleton Loading）— shimmer / pulse

/* ===== CSS 変数（色の調整はここで）===== */
:root {
  --sk-color:     #E8ECF0;
  --sk-highlight: #F4F6F9;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; padding: 24px; background: #f0f2f5; }

/* ===== デモセクション ===== */
.demo-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  max-width: 640px;
}
.pattern-label {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  color: #2B7FE8;
}

/* ===== shimmer ===== */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    var(--sk-color) 25%,
    var(--sk-highlight) 50%,
    var(--sk-color) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

/* ===== pulse ===== */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.pulse {
  background: var(--sk-color);
  animation: pulse 1.5s ease-in-out infinite;
}

/* ===== フェードイン（コンテンツ表示時）===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content { animation: fadeIn 0.4s ease; }

/* ===== スケルトン共通 ===== */
.sk-line { height: 12px; border-radius: 4px; margin-bottom: 8px; }
.sk-line:last-child { margin-bottom: 0; }
.sk-title { height: 16px; width: 70%; }
.sk-short { width: 40%; }

/* ===== Pattern 1: カード型 ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.sk-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
.sk-thumb { height: 100px; border-radius: 6px; margin-bottom: 12px; }

/* カード実コンテンツ */
.real-card  { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
.real-thumb {
  height: 100px; border-radius: 6px; margin-bottom: 10px; background: #DBEAFE;
  display: flex; align-items: center; justify-content: center; font-size: 36px;
}
.real-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #1a2332; }
.real-text  { margin: 0 0 8px; font-size: 12px; color: #5a6a7a; line-height: 1.5; }
.real-tag {
  display: inline-block; padding: 2px 8px;
  background: #E8F0FE; color: #2B7FE8;
  border-radius: 12px; font-size: 11px; font-weight: 600;
}

/* ===== Pattern 2: リスト型 ===== */
.item-list { list-style: none; padding: 0; margin: 0 0 16px; }
.sk-item, .real-item {
  display: flex; align-items: flex-start;
  gap: 12px; padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
}
.sk-item:last-child, .real-item:last-child { border-bottom: none; }
.sk-list-thumb { width: 60px; height: 60px; border-radius: 6px; flex-shrink: 0; }
.sk-body { flex: 1; }

/* リスト実コンテンツ */
.real-thumb-sq {
  width: 60px; height: 60px;
  border-radius: 6px; background: #FEF9C3; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.real-item-body { flex: 1; }
.real-name  { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #1a2332; }
.real-model { margin: 0 0 4px; font-size: 12px; color: #5a6a7a; }
.real-price { margin: 0; font-size: 13px; font-weight: 700; color: #2B7FE8; }

/* ===== ボタン ===== */
.controls { display: flex; gap: 8px; justify-content: flex-end; }
.controls button {
  padding: 6px 16px; font-size: 13px;
  border-radius: 6px; cursor: pointer;
  font-family: sans-serif; transition: background 0.15s;
}
.controls button:first-child {
  background: #2B7FE8; color: #fff; border: none;
}
.controls button:first-child:hover     { background: #1a6fd4; }
.controls button:first-child:disabled  { background: #9AB8E8; cursor: not-allowed; }
.controls button:last-child {
  background: #fff; color: #5a6a7a; border: 1.5px solid #D0D7E0;
}
.controls button:last-child:hover { background: #F4F6F9; }

/* ===== レスポンシブ ===== */
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}

// ===== ダミーデータ =====
var cardItems = [
  { title: '月次レポート',   body: '2026年4月の売上サマリーです。前月比 +12% を達成しました。', tag: '売上',    emoji: '📊' },
  { title: 'タスク完了率',   body: '今週のスプリントは目標の 94% を達成。残タスクは3件です。',   tag: 'タスク',  emoji: '✅' },
  { title: 'ユーザー登録数', body: '今月の新規登録は 1,248 件。前月比 +8% で順調に推移中。',    tag: 'ユーザー', emoji: '👥' },
];
var listItems = [
  { name: '65型 4K有機ELテレビ',  model: 'Model: TV-4K-65',  price: '¥330,000', emoji: '📺' },
  { name: 'ドラム式洗濯乾燥機',   model: 'Model: WD-DR8500', price: '¥198,000', emoji: '🫧' },
  { name: 'ノンフロスト冷蔵庫',   model: 'Model: RF-NF600',  price: '¥145,000', emoji: '❄️' },
  { name: 'ロボット掃除機',       model: 'Model: RC-A300',   price: '¥89,800',  emoji: '🤖' },
  { name: '食器洗い乾燥機',       model: 'Model: DW-S550',   price: '¥76,000',  emoji: '🍽️' },
];

// リセット時にタイマーをキャンセルするため ID を保持する
var p1Timer = null;
var p2Timer = null;

// ===== Pattern 1: カード型（shimmer）=====

document.getElementById('p1-load-btn').addEventListener('click', function() {
  this.disabled = true;
  p1Timer = setTimeout(function() {
    var skeleton = document.getElementById('p1-skeleton');
    var content  = document.getElementById('p1-content');
    skeleton.setAttribute('hidden', '');
    renderCards(content);
    content.removeAttribute('hidden');
    p1Timer = null;
  }, 1000);
});

document.getElementById('p1-reset-btn').addEventListener('click', function() {
  if (p1Timer) { clearTimeout(p1Timer); p1Timer = null; }
  var skeleton = document.getElementById('p1-skeleton');
  var content  = document.getElementById('p1-content');
  content.setAttribute('hidden', '');
  content.innerHTML = '';
  skeleton.removeAttribute('hidden');
  document.getElementById('p1-load-btn').disabled = false;
});

// カードコンテンツを生成して container に追加する
function renderCards(container) {
  container.innerHTML = '';
  for (var i = 0; i < cardItems.length; i++) {
    var item  = cardItems[i];
    var card  = document.createElement('div');  card.className  = 'real-card';
    var thumb = document.createElement('div');  thumb.className = 'real-thumb'; thumb.textContent = item.emoji;
    var title = document.createElement('p');    title.className = 'real-title'; title.textContent = item.title;
    var text  = document.createElement('p');    text.className  = 'real-text';  text.textContent  = item.body;
    var tag   = document.createElement('span'); tag.className   = 'real-tag';   tag.textContent   = item.tag;
    card.appendChild(thumb);
    card.appendChild(title);
    card.appendChild(text);
    card.appendChild(tag);
    container.appendChild(card);
  }
}

// ===== Pattern 2: リスト型（pulse）=====

document.getElementById('p2-load-btn').addEventListener('click', function() {
  this.disabled = true;
  p2Timer = setTimeout(function() {
    var skeleton = document.getElementById('p2-skeleton');
    var content  = document.getElementById('p2-content');
    skeleton.setAttribute('hidden', '');
    renderList(content);
    content.removeAttribute('hidden');
    p2Timer = null;
  }, 1000);
});

document.getElementById('p2-reset-btn').addEventListener('click', function() {
  if (p2Timer) { clearTimeout(p2Timer); p2Timer = null; }
  var skeleton = document.getElementById('p2-skeleton');
  var content  = document.getElementById('p2-content');
  content.setAttribute('hidden', '');
  content.innerHTML = '';
  skeleton.removeAttribute('hidden');
  document.getElementById('p2-load-btn').disabled = false;
});

// リストコンテンツを生成して container に追加する
function renderList(container) {
  container.innerHTML = '';
  for (var i = 0; i < listItems.length; i++) {
    var item  = listItems[i];
    var li    = document.createElement('li');  li.className    = 'real-item';
    var thumb = document.createElement('div'); thumb.className = 'real-thumb-sq'; thumb.textContent = item.emoji;
    var body  = document.createElement('div'); body.className  = 'real-item-body';
    var name  = document.createElement('p');   name.className  = 'real-name';  name.textContent  = item.name;
    var model = document.createElement('p');   model.className = 'real-model'; model.textContent = item.model;
    var price = document.createElement('p');   price.className = 'real-price'; price.textContent = item.price;
    body.appendChild(name);
    body.appendChild(model);
    body.appendChild(price);
    li.appendChild(thumb);
    li.appendChild(body);
    container.appendChild(li);
  }
}