/* 着せ替えの背景画（2026-10-01 稲木さん「デザインを変えるのはやめましょう 元のままでお願いします その代わり着せ替えができるようにしてください」）。
   既定の standard（標準）では何も出さない（この表の規則は、すべて html[data-skin="dream|meadow|sunrise"] で始まる。test/theme.test.ts で検査）。
   選んだ 1 枚を全画面に敷く: dream ゆめ色（水色〜紫〜ピンク）／meadow 若草（緑〜水色）／sunrise 朝やけ（ピンク〜黄）。
   絵は月・星・雲のパステル画（フリー素材。元の PNG はデスクトップの 色彩検定スタディ/素材）。
   被せ（白 30%）は薄くして、文字の側（白いにじみと座布団）で読ませる。body::before は上端の虹の線（style.css）なので、背景は body::after。
   パソコン幅ではサイドバー（245px、たたむと 76px）の右から敷く。ダークモードとの組み合わせは theme-dark.css（暗い被せで絵をうっすら見せる）。
   問題の図版（.q-visual）には何も掛けない（色を変えない）。 */
html[data-skin="dream"]{--bg-art:url(/img/bg-dream.webp)}
html[data-skin="meadow"]{--bg-art:url(/img/bg-meadow.webp)}
html[data-skin="sunrise"]{--bg-art:url(/img/bg-sunrise.webp)}
html[data-skin="dream"],html[data-skin="meadow"],html[data-skin="sunrise"]{--bg-veil:rgba(255,255,255,.3);background:var(--bg,#fcf8ff)}
html[data-skin="dream"] body::after,html[data-skin="meadow"] body::after,html[data-skin="sunrise"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--bg-veil),var(--bg-veil)),var(--bg-art) 0 0/cover no-repeat var(--bg,#fcf8ff)}
html[data-skin="dream"] body,html[data-skin="meadow"] body,html[data-skin="sunrise"] body{background:transparent}
@media(min-width:851px){
 html[data-skin="dream"] body:has(>aside)::after,html[data-skin="meadow"] body:has(>aside)::after,html[data-skin="sunrise"] body:has(>aside)::after{left:245px}
 html[data-skin="dream"] body.nav-collapsed::after,html[data-skin="meadow"] body.nav-collapsed::after,html[data-skin="sunrise"] body.nav-collapsed::after{left:76px}
}
/* 絵の上にじかに乗る文字: 白いにじみで読ませる */
html[data-skin="dream"] :is(main>header,.intro,.sectionhead,#app>h1,#app>h2,#app>p,.tools>.muted),html[data-skin="meadow"] :is(main>header,.intro,.sectionhead,#app>h1,#app>h2,#app>p,.tools>.muted),html[data-skin="sunrise"] :is(main>header,.intro,.sectionhead,#app>h1,#app>h2,#app>p,.tools>.muted){text-shadow:0 0 2px #fff,0 0 8px #fff,0 0 14px rgba(255,255,255,.9)}
html[data-skin="dream"] main>header,html[data-skin="meadow"] main>header,html[data-skin="sunrise"] main>header{color:#4f4263;border-bottom-color:rgba(255,255,255,.7)}
html[data-skin="dream"] :is(.intro p,.sectionhead .muted,.sectionhead small,.sectionhead span,.tools>.muted),html[data-skin="meadow"] :is(.intro p,.sectionhead .muted,.sectionhead small,.sectionhead span,.tools>.muted),html[data-skin="sunrise"] :is(.intro p,.sectionhead .muted,.sectionhead small,.sectionhead span,.tools>.muted){color:#4f4263}
/* 問題を解く画面は、問題文が絵にじかに乗らないよう、全体に白い座布団を敷く */
html[data-skin="dream"] .quiz,html[data-skin="meadow"] .quiz,html[data-skin="sunrise"] .quiz{background:rgba(255,255,255,.88);border-radius:24px;padding:22px 26px;box-shadow:0 6px 22px rgba(90,62,154,.08)}
@media(max-width:600px){html[data-skin="dream"] .quiz,html[data-skin="meadow"] .quiz,html[data-skin="sunrise"] .quiz{padding:16px 14px;border-radius:20px}}
/* フッターは長い小さな文字なので座布団を敷く */
html[data-skin="dream"] footer,html[data-skin="meadow"] footer,html[data-skin="sunrise"] footer{background:rgba(255,255,255,.78);border:0;border-radius:18px;padding:16px 18px}
/* アプリ版の案内・特商法・プライバシーのページ（.doc-panel）は、本文を白い台紙に載せる */
html[data-skin="dream"] .doc-panel,html[data-skin="meadow"] .doc-panel,html[data-skin="sunrise"] .doc-panel{background:rgba(255,255,255,.9);border-radius:24px;box-shadow:0 6px 22px rgba(90,62,154,.08)}
html[data-skin="dream"] body.doc-panel,html[data-skin="meadow"] body.doc-panel,html[data-skin="sunrise"] body.doc-panel{margin-top:16px;margin-bottom:16px}