/* サイトごとの見た目（site.yaml の design）。部品は template のグラス UI（g-）のまま、トークンと並べ方だけを変える。
   body に gs-style-{型} と gs-list-{並べ方}、--gs-accent（テーマの色）と --gs-font（字体）が付く。
   型: glass（写真の背景にガラスの面。今までの形）、paper（紙の白・明朝の見出し・罫線）、solid（色の帯・平らな白い面）、
       soft（淡い色・大きな角丸・丸い字体）、dark（暗い背景・光る色） */

body[class*="gs-style-"] {
  --g-primary: var(--gs-accent);
  --g-primary-hover: color-mix(in srgb, var(--gs-accent) 82%, #000);
  --g-primary-subtle: color-mix(in srgb, var(--gs-accent) 14%, transparent);
  --accent: var(--gs-accent);
}
body[style*="--gs-font"] h1, body[style*="--gs-font"] h2, body[style*="--gs-font"] h3,
body[style*="--gs-font"] .brand, body[style*="--gs-font"] .g-list-title, body[style*="--gs-font"] .gs-tile-label {
  font-family: var(--gs-font), system-ui, sans-serif;
}

/* ---- 明るい型（paper・solid・soft）は、画面の設定が暗くても明るいまま ---- */
body.gs-style-paper, body.gs-style-solid, body.gs-style-soft {
  color-scheme: light;
  --fg: #1f2328; --muted: #5f6b76; --line: #dcdfe3; --card: #fff;
  --g-text: #0f172a; --g-text-muted: #64748b;
  --g-glass-bg: #fff; --g-glass-bg-subtle: #f6f7f9; --g-glass-bg-elevated: #fff;
  --g-glass-border: #e3e6ea; --g-glass-border-subtle: #eceef1;
  --g-glass-shadow: 0 1px 2px rgba(15, 23, 42, .06); --g-glass-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --gs-panel: #fff; --gs-field: #fff; --gs-line: #e3e6ea;
  --g-primary-fg: #fff;
}
body.gs-style-paper .g-card, body.gs-style-solid .g-card, body.gs-style-soft .g-card,
body.gs-style-paper .g-list-item, body.gs-style-solid .g-list-item, body.gs-style-soft .g-list-item {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---- paper: 新聞・雑誌のような紙の白。罫線で区切り、見出しを大きく ---- */
body.gs-style-paper { background: #faf8f3; }
body.gs-style-paper .site-header {
  background: #faf8f3; border-bottom: 3px double #1f2328; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.gs-style-paper .site-header .brand { color: #1f2328; font-size: 1.25rem; font-weight: 800; letter-spacing: .06em; }
body.gs-style-paper .gs-hero { color: #1f2328; text-shadow: none; padding: 28px 16px 4px; }
body.gs-style-paper .gs-hero-inner { border-bottom: 1px solid #1f2328; padding-bottom: 18px; }
body.gs-style-paper .gs-hero-icon { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.gs-style-paper .gs-hero h1 { font-size: 2.3rem; letter-spacing: .02em; }
body.gs-style-paper .gs-hero-stats b { color: var(--gs-accent); }
body.gs-style-paper main.container { background: transparent; border: 0; box-shadow: none; padding-top: 4px; }
body.gs-style-paper h2 { border-bottom: 2px solid var(--gs-accent); padding-bottom: 4px; margin-top: 28px; }
body.gs-style-paper .g-card, body.gs-style-paper .g-list-item { border-radius: 2px; box-shadow: none; }
body.gs-style-paper .gs-list .g-list-item { border-width: 0 0 1px; background: transparent; }
body.gs-style-paper .site-footer { background: #f1ede4; border-top: 1px solid #1f2328; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- solid: 色の帯の見出しと、平らな白い面。データを見るサイト向け ---- */
body.gs-style-solid { background: #eef1f5; }
body.gs-style-solid .site-header {
  background: var(--gs-accent); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.gs-style-solid .site-header .brand, body.gs-style-solid .site-header nav a { color: #fff; }
body.gs-style-solid .gs-hero {
  background: linear-gradient(135deg, var(--gs-accent), color-mix(in srgb, var(--gs-accent) 60%, #0f172a));
  padding: 40px 16px 36px; text-shadow: none;
}
body.gs-style-solid .gs-hero-icon { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); box-shadow: none; border-radius: 12px; }
body.gs-style-solid main.container { margin-top: -18px; border-radius: 8px; box-shadow: 0 2px 10px rgba(15, 23, 42, .08); border-color: #e3e6ea; }
body.gs-style-solid h2 { font-size: 1.05rem; padding-left: 10px; border-left: 4px solid var(--gs-accent); }
body.gs-style-solid .g-card, body.gs-style-solid .g-list-item { border-radius: 6px; }
body.gs-style-solid .site-footer { background: #1f2937; color: #cbd5e1; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.gs-style-solid .site-footer a { color: #fff; }

/* ---- soft: 淡いテーマの色の背景、大きな角丸、真ん中寄せの見出し ---- */
body.gs-style-soft {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--gs-accent) 22%, transparent) 0 220px, transparent 420px),
    radial-gradient(circle at 92% 30%, color-mix(in srgb, var(--gs-accent) 14%, transparent) 0 180px, transparent 380px),
    color-mix(in srgb, var(--gs-accent) 6%, #fffdf9);
  --g-radius-md: 18px; --g-radius-lg: 26px;
}
body.gs-style-soft .site-header {
  background: rgba(255, 255, 255, .7); border: 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--gs-accent) 20%, transparent);
}
body.gs-style-soft .site-header .brand { color: color-mix(in srgb, var(--gs-accent) 70%, #1f2328); }
body.gs-style-soft .gs-hero { color: #1f2328; text-shadow: none; padding: 40px 16px 8px; }
body.gs-style-soft .gs-hero-inner { flex-direction: column; text-align: center; gap: 12px; }
body.gs-style-soft .gs-hero p { margin: 0 auto; }
body.gs-style-soft .gs-hero-stats { justify-content: center; }
body.gs-style-soft .gs-hero-stats b { color: var(--gs-accent); }
body.gs-style-soft .gs-hero-icon {
  width: 110px; height: 110px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--gs-accent) 30%, transparent);
}
body.gs-style-soft main.container { border: 0; border-radius: 28px; box-shadow: 0 12px 40px color-mix(in srgb, var(--gs-accent) 14%, transparent); }
body.gs-style-soft h2 { display: inline-block; background: color-mix(in srgb, var(--gs-accent) 14%, #fff); padding: 2px 14px; border-radius: 999px; }
body.gs-style-soft .g-card, body.gs-style-soft .g-list-item { border-radius: 18px; border-color: color-mix(in srgb, var(--gs-accent) 16%, #eceef1); }
body.gs-style-soft .g-badge { border-radius: 999px; }
body.gs-style-soft .site-footer { background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- dark: 暗い背景に光るテーマの色。夜・遊びのサイト向け ---- */
body.gs-style-dark {
  color-scheme: dark;
  --fg: #e6e8ee; --muted: #9aa3b5; --line: #2b3142; --card: #161a26;
  --g-text: #eef1f7; --g-text-muted: #9aa3b5;
  --g-glass-bg: rgba(24, 28, 42, .78); --g-glass-bg-subtle: rgba(24, 28, 42, .5); --g-glass-bg-elevated: rgba(30, 35, 52, .92);
  --g-glass-border: rgba(255, 255, 255, .1); --g-glass-border-subtle: rgba(255, 255, 255, .06);
  --g-glass-shadow: 0 8px 30px rgba(0, 0, 0, .4); --g-glass-shadow-sm: 0 4px 14px rgba(0, 0, 0, .3);
  --gs-panel: rgba(18, 21, 32, .92); --gs-field: rgba(24, 28, 42, .9); --gs-line: rgba(255, 255, 255, .08);
  --g-primary-fg: #0b0d14;
  background:
    radial-gradient(ellipse at 20% -10%, color-mix(in srgb, var(--gs-accent) 35%, transparent), transparent 55%),
    radial-gradient(ellipse at 100% 40%, color-mix(in srgb, var(--gs-accent) 18%, transparent), transparent 50%),
    #0b0d14;
  background-attachment: fixed;
}
body.gs-style-dark .site-header { background: rgba(11, 13, 20, .7); border-color: rgba(255, 255, 255, .08); }
body.gs-style-dark .site-header .brand { color: #fff; }
body.gs-style-dark .gs-hero h1 { text-shadow: 0 0 24px color-mix(in srgb, var(--gs-accent) 70%, transparent); }
body.gs-style-dark .gs-hero-icon { background: rgba(255, 255, 255, .06); border-color: color-mix(in srgb, var(--gs-accent) 50%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--gs-accent) 35%, transparent); }
body.gs-style-dark .gs-hero-stats b { color: var(--gs-accent); }
body.gs-style-dark main.container { border-color: rgba(255, 255, 255, .08); }
body.gs-style-dark a { color: color-mix(in srgb, var(--gs-accent) 75%, #fff); }
body.gs-style-dark h2 { color: #fff; }
body.gs-style-dark h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: middle; border-radius: 50%; background: var(--gs-accent); box-shadow: 0 0 10px var(--gs-accent); }
body.gs-style-dark .g-card-interactive:hover, body.gs-style-dark .g-list-item-interactive:hover { border-color: color-mix(in srgb, var(--gs-accent) 60%, transparent); }
body.gs-style-dark .gs-thumb, body.gs-style-dark .gs-ogp img { background: #0f1320; }
body.gs-style-dark .site-footer { background: rgba(11, 13, 20, .7); color: #9aa3b5; }

/* ---- 一覧を画像のカードで並べる（gs-list-grid）。画像の多いサイト向け ---- */
body.gs-list-grid .gs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
body.gs-list-grid .gs-list .g-list-item { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; margin: 0; }
body.gs-list-grid .gs-list .g-list-main { flex-direction: column; align-items: stretch; gap: 0; }
body.gs-list-grid .gs-list .gs-thumb { width: 100%; height: auto; aspect-ratio: 1.91 / 1; border-radius: 0; }
body.gs-list-grid .gs-list .g-list-avatar {
  width: 100%; height: auto; aspect-ratio: 1.91 / 1; border-radius: 0; font-size: 2.6rem;
  background: color-mix(in srgb, var(--gs-accent) 10%, #f6f7f9);
}
body.gs-list-grid .gs-list .g-list-body { padding: 10px 12px 4px; }
body.gs-list-grid .gs-list .g-list-meta { padding: 0 12px 10px; }
@media (max-width: 520px) { body.gs-list-grid .gs-list { grid-template-columns: 1fr 1fr; gap: 8px; } }

/* 写真の上で読みやすくするための暗い下地（site.css）は、写真のない型では使わない */
body.gs-style-paper .gs-hero-inner, body.gs-style-soft .gs-hero-inner, body.gs-style-solid .gs-hero-inner {
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0;
}
body.gs-style-dark .gs-hero-inner { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
body.gs-style-dark.gs-list-grid .gs-list .g-list-avatar { background: color-mix(in srgb, var(--gs-accent) 14%, #121624); }
body.gs-style-soft .gs-hero-inner, body.gs-style-solid .gs-hero-inner { border: 0; }
body.gs-style-paper .gs-hero-inner { border-width: 0 0 1px; border-color: #1f2328; padding: 8px 0 18px; }
/* DotGothic16 は太字がない（太字にすると点がつぶれる） */
body[style*="DotGothic16"] h1, body[style*="DotGothic16"] h2, body[style*="DotGothic16"] h3, body[style*="DotGothic16"] .brand,
body[style*="DotGothic16"] .g-list-title, body[style*="DotGothic16"] .gs-tile-label { font-weight: 400; }