
/* 飼い主さん向け資料 — Senastra hokusai テーマ */
:root{
  --color-bg:#E8F0F6; --color-bg-subtle:#C8D8EA; --color-surface:#F0F4F8;
  --color-surface-hover:#E4ECF2; --color-border:#88AACC; --color-border-strong:#5E86AE;
  --color-text-primary:#0E2840; --color-text-secondary:#3A5A78; --color-text-tertiary:#6688AA;
  --color-accent:#2E78B8; --color-accent-hover:#24628F; --color-accent-subtle:#DCEAF5;
  --color-text-on-accent:#FFFFFF; --shadow-color:210deg 40% 30%;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);
  color:var(--color-text-primary);background:var(--color-bg);-webkit-font-smoothing:antialiased;
  padding-bottom:var(--space-16)}
.container{max-width:720px;margin:0 auto;padding:0 var(--space-4)}
.topbar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);background:linear-gradient(160deg,#2E78B8,#1E5688);color:#fff;
  padding:var(--space-3) var(--space-4)}
.topbar .brand{font-weight:var(--font-semibold);font-size:var(--text-md)}
.topbar .back,a.back{color:#fff;text-decoration:none;font-size:var(--text-sm);opacity:.95}
.topbar .back:hover{opacity:1;text-decoration:underline}
.lead{color:var(--color-text-secondary);margin:var(--space-5) 0}

/* 一覧カード */
.cards{display:grid;gap:var(--space-4);margin-top:var(--space-4)}
.rcard{display:block;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:var(--card-padding);text-decoration:none;color:inherit;
  box-shadow:var(--shadow-sm);transition:var(--transition-base)}
.rcard:hover{background:var(--color-surface-hover);border-color:var(--color-accent);transform:translateY(-2px)}
.rcard h3{color:var(--color-accent);font-size:var(--text-lg);font-weight:var(--font-semibold);margin-bottom:var(--space-2)}
.rcard p{color:var(--color-text-secondary);font-size:var(--text-sm)}
.rcard .tag{display:inline-block;margin-top:var(--space-2);font-size:var(--text-2xs);font-weight:var(--font-medium);
  color:var(--color-accent);background:var(--color-accent-subtle);border-radius:var(--radius-badge);padding:2px 10px}

/* 記事本文 */
.prose{margin-top:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.prose h1{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text-primary);
  line-height:var(--leading-tight);margin:var(--space-2) 0 var(--space-5)}
.prose h2{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-accent);
  margin:var(--space-7) 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-accent-subtle)}
.prose h3{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary);margin:var(--space-5) 0 var(--space-2)}
.prose p{margin:var(--space-3) 0;color:var(--color-text-secondary)}
.prose strong{color:var(--color-text-primary)}
.prose ul,.prose ol{margin:var(--space-3) 0 var(--space-3) var(--space-6);color:var(--color-text-secondary)}
.prose li{margin:var(--space-1) 0}
.prose blockquote{margin:var(--space-4) 0;padding:var(--space-3) var(--space-4);
  background:var(--color-accent-subtle);border-left:4px solid var(--color-accent);border-radius:var(--radius-md);
  color:var(--color-text-primary)}
.prose hr{border:0;border-top:1px solid var(--color-border);margin:var(--space-6) 0}
.prose code{background:var(--color-bg-subtle);padding:1px 6px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.9em}
.prose a{color:var(--color-accent)}
.prose table{width:100%;border-collapse:collapse;margin:var(--space-4) 0;font-size:var(--text-sm);
  display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--color-border);padding:var(--space-2) var(--space-3);text-align:left;vertical-align:top}
.prose th{background:var(--color-accent-subtle);color:var(--color-text-primary);font-weight:var(--font-semibold)}
.prose tr:nth-child(even) td{background:var(--color-bg-subtle)}
.foot{margin-top:var(--space-6);color:var(--color-text-tertiary);font-size:var(--text-xs);text-align:center}
.foot a{display:inline-block;margin-bottom:var(--space-2)}
.disclaimer{margin-top:var(--space-4);font-size:var(--text-xs);color:var(--color-text-tertiary);
  background:var(--color-bg-subtle);border-radius:var(--radius-md);padding:var(--space-3)}
