:root {
  color-scheme: light;
  --theme-background: #f5f2ea;
  --theme-surface: #fffefa;
  --theme-panel: #f0eee8;
  --theme-ink: #203332;
  --theme-body: #52605b;
  --theme-accent: #bd9a6b;
  --theme-line: #d7d7cb;
  --theme-button: #203332;
  --theme-footer: #203b39;
  --theme-bracket: #9a7852;
  --theme-serif: "Noto Serif TC", Georgia, serif;
  --theme-sans: "Noto Sans TC", system-ui, sans-serif;
  --theme-hero-base: #1f3438;
  --theme-hero-mobile: #193439;
  --theme-hero-shade: linear-gradient(90deg,rgba(8,25,31,.77) 0%,rgba(8,25,31,.42) 45%,rgba(8,25,31,.03) 85%),linear-gradient(0deg,rgba(8,25,31,.46),transparent 50%);
}

body[data-theme="brand"] {
  --theme-background: #f5f2ea;
  --theme-surface: #fffefa;
  --theme-panel: #f0eee8;
  --theme-ink: #203332;
  --theme-body: #52605b;
  --theme-accent: #bd9a6b;
  --theme-line: #d7d7cb;
  --theme-button: #203332;
  --theme-footer: #203b39;
  --theme-bracket: #9a7852;
  --theme-hero-base: #1f3438;
  --theme-hero-mobile: #193439;
  --theme-hero-shade: linear-gradient(90deg,rgba(8,25,31,.77) 0%,rgba(8,25,31,.42) 45%,rgba(8,25,31,.03) 85%),linear-gradient(0deg,rgba(8,25,31,.46),transparent 50%);
}

body[data-theme="winter"] {
  --theme-background: #f7f9fa;
  --theme-surface: #fff;
  --theme-panel: #dfeaf0;
  --theme-ink: #172a3a;
  --theme-body: #53616c;
  --theme-accent: #4f7ea8;
  --theme-line: #d3dee6;
  --theme-button: #4f7ea8;
  --theme-footer: #172a3a;
  --theme-bracket: #4f7ea8;
  --theme-hero-base: #172a3a;
  --theme-hero-mobile: #172a3a;
  --theme-hero-shade: linear-gradient(90deg,rgba(12,31,49,.78) 0%,rgba(12,31,49,.48) 47%,rgba(12,31,49,.06) 88%),linear-gradient(0deg,rgba(12,31,49,.5),transparent 54%);
}

body[data-theme="miidokoro"] {
  --theme-background: #f7f3ee;
  --theme-surface: #fffdf9;
  --theme-panel: #f1eae3;
  --theme-ink: #1d2023;
  --theme-body: #50555c;
  --theme-accent: #816354;
  --theme-line: #ded8d0;
  --theme-button: #5d4021;
  --theme-footer: #634727;
  --theme-bracket: #999999;
  --theme-serif: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  --theme-hero-base: #3f2c20;
  --theme-hero-mobile: #3f2c20;
  --theme-hero-shade: linear-gradient(90deg,rgba(28,22,18,.72) 0%,rgba(28,22,18,.4) 45%,rgba(28,22,18,.04) 88%),linear-gradient(0deg,rgba(28,22,18,.5),transparent 55%);
}

body[data-theme="golf"] {
  --theme-background: #f4f3ee;
  --theme-surface: #fff;
  --theme-panel: #f4f3ee;
  --theme-ink: #2f5d3a;
  --theme-body: #4e5b4e;
  --theme-accent: #8fb8d8;
  --theme-line: #d8c9a3;
  --theme-button: #2f5d3a;
  --theme-footer: #2f5d3a;
  --theme-bracket: #8fb8d8;
  --theme-hero-base: #2f5d3a;
  --theme-hero-mobile: #2f5d3a;
  --theme-hero-shade: linear-gradient(90deg,rgba(23,50,30,.76) 0%,rgba(23,50,30,.4) 48%,rgba(23,50,30,.04) 88%),linear-gradient(0deg,rgba(23,50,30,.48),transparent 55%);
}

body[data-theme="bloom"] {
  --theme-background: #faf8f3;
  --theme-surface: #fff;
  --theme-panel: #f3edf8;
  --theme-ink: #493f5b;
  --theme-body: #5d5866;
  --theme-accent: #8b7bb8;
  --theme-line: #d9d4e2;
  --theme-button: #8b7bb8;
  --theme-footer: #493f5b;
  --theme-bracket: #6f9a4f;
  --theme-hero-base: #493f5b;
  --theme-hero-mobile: #493f5b;
  --theme-hero-shade: linear-gradient(90deg,rgba(47,38,66,.76) 0%,rgba(47,38,66,.4) 48%,rgba(47,38,66,.04) 88%),linear-gradient(0deg,rgba(47,38,66,.48),transparent 55%);
}

.page-notes {
  max-width: 1204px;
  margin: 0 auto;
  padding: 28px clamp(24px,6vw,84px) 34px;
  border-top: 1px solid var(--theme-line);
  color: var(--theme-body);
}

.page-notes h2 {
  margin: 0 0 12px;
  color: var(--theme-ink);
  font: 600 15px/1.5 var(--theme-sans);
}

.page-notes p {
  margin: 0;
  color: inherit;
  font: 12px/1.9 var(--theme-sans);
}

.page-notes p + p { margin-top: 4px; }
.page-notes a { color: inherit; text-underline-offset: 3px; }

body[data-theme="winter"] .page-notes,
body[data-theme="miidokoro"] .page-notes { max-width: none; }

body[data-theme="miidokoro"] .page-notes {
  background: var(--theme-footer);
  color: #f7f3ee;
}

body[data-theme="miidokoro"] .page-notes h2 { color: #fff; }

@media (max-width: 700px) {
  .page-notes { padding: 24px 25px 30px; }
}
