/* article_common.css — 記事モジュール共通の CSS 変数・ベーススタイル
 * 4テンプレート (article_detail, article_result, swipe_diagnosis, swipe_diagnosis_result) で共有
 */

:root {
  --diag-primary:#c94b4b;
  --diag-primary-dark:#7c1f24;
  --diag-accent:#2563eb;
  --diag-sand:#f2dfdd;
  --diag-cream:#f7f1eb;
  --diag-gray:#64748b;
  --diag-border:#e5e7eb;
  --diag-text:#111827;
  /* swipe_diagnosis.html 互換エイリアス */
  --primary:#c94b4b;
  --primary-dark:#7c1f24;
  --accent:#2563eb;
  --sand:#f2dfdd;
  --cream:#f7f1eb;
  --gray:#64748b;
  --border:#e5e7eb;
  --text:#111827;
  --green:#10b981;
  --red:#ef4444;
}

*{box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--diag-text);margin:0;background:#fff}

/* ページシェル */
.page-shell{max-width:1180px;margin:32px auto 80px;padding:0 18px}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.page-head a.back{color:var(--diag-accent);text-decoration:none;font-size:14px}
.page-head a.back:hover{text-decoration:underline}
.page-head .admin-link{display:none}

/* カテゴリ / タグチップ */
.category-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.category-chip{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--diag-cream);border:1px solid #e2d4d0;color:#9b2c2c}
.tag-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tag-chip{font-size:12px;padding:4px 10px;border-radius:999px;background:#f1f5f9;color:var(--diag-gray);text-decoration:none}
.tag-chip:hover{background:#e2e8f0}

/* ユーティリティ */
.is-hidden{display:none !important}
.loading-placeholder{display:flex;align-items:center;justify-content:center;gap:10px;color:#94a3b8}
.loading-spinner{width:18px;height:18px;border:3px solid #e5e7eb;border-top:3px solid #94a3b8;border-radius:999px;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}