/* ========================================
   素直に話すかわいいお姉ちゃん — 共通スタイル
   Tailwind CDN と併用する追加レイヤー
   ======================================== */

body { font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif; }
.font-en { font-family: 'Inter', system-ui, sans-serif; }

/* Body background variants */
body.bg-main { background: #B90826; }
body.bg-sub  { background: #FCFAF4; }

/* Header / footer category link */
.cat-link { opacity: .85; transition: opacity .15s; }
.cat-link:hover,
.cat-link.active { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* Cards (main page grid) */
.card-img { background-size: cover; background-position: center; }
.card-overlay { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); }
.card { transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.5); }

/* Placeholder card gradients */
.ph-1 { background: radial-gradient(120% 120% at 30% 20%, #E87B7B 0%, #8F2F3A 55%, #3E1018 100%); }
.ph-2 { background: radial-gradient(120% 120% at 60% 40%, #6FA8A0 0%, #2E4A50 60%, #121418 100%); }
.ph-3 { background: radial-gradient(120% 120% at 70% 30%, #C26A5E 0%, #6C2A2B 55%, #2A0B10 100%); }
.ph-4 { background: radial-gradient(120% 120% at 40% 30%, #F0C8B6 0%, #C58E7B 50%, #5E3A2E 100%); }
.ph-5 { background: radial-gradient(120% 120% at 60% 50%, #C79A3B 0%, #6E4C18 55%, #1F140A 100%); }

/* Article */
.blockquote-red { border-left: 4px solid #B8132A; }
.hero-art {
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(184,19,42,.35), transparent 70%),
    radial-gradient(50% 40% at 80% 70%, rgba(30,43,219,.25), transparent 70%),
    linear-gradient(135deg, #1A0D18 0%, #2A1530 50%, #0C1A3A 100%);
}

/* Board row */
.row:hover { background: rgba(26, 26, 26, 0.04); }

/* Form field (paper bg pages) */
.field { background: #FFFFFF; border: 1px solid #E5DED0; color: #1A1A1A; border-radius: 4px; }
.field:focus { outline: none; border-color: #B8132A; box-shadow: 0 0 0 3px rgba(184,19,42,0.12); }

/* Flash messages */
.alert         { padding: 12px 16px; border-radius: 4px; font-size: 14px; }
.alert-success { background: #E6F4E4; color: #1F4A24; border: 1px solid #B1D9AC; }
.alert-error   { background: #FBE3E6; color: #5A1420; border: 1px solid #F2A9B0; }