/* ひだまり 木漏れ日＋固定背景の共有スタイル（index.html以外の各ページ用） */
/* 背景画像はルート絶対パスにして、/blog/ や /hub/ など階層が違っても効くようにする */

/* 固定背景：施術マットの写真がスクロールしてもずっと奥に居続ける */
.page-bg {
  position: fixed; inset: 0; z-index: -1;
  background-image: url('/img_tatami.jpg');
  background-size: cover;
  background-position: center 40%;
}

/* 木漏れ日canvas（コンテンツの上・ヘッダーの下に重ねる。操作には無干渉） */
#komorebi { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #komorebi { display: none; } }

/* 紙の質感（grain）。記事ページは body.komorebi-soft で薄める */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .20; mix-blend-mode: multiply; background-size: 320px 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.komorebi-soft::after { opacity: .10; }

/* テキスト選択を蛍光マーカー風に */
::selection { background: rgba(232,201,168,.55); }

@media (max-width: 800px) {
  .page-bg { background-position: 28% 40%; } /* スマホは明るい障子側を見せる */
}