@charset "UTF-8";

/*
 * fuwaimg 2.0 — Sunflower theme
 * css/fuwaimg.css の後に読み込む追加の着せ替えCSSです。
 * このファイルだけでは動作しません。元のCSS・JSと利用条件を維持してください。
 * 色を変更する場合は、以下のカスタムプロパティを編集してください。
 */

#fuwaimg {
  --fuwaimg-sunflower-surface: #fff;
  --fuwaimg-sunflower-canvas: #fffdf3;
  --fuwaimg-sunflower-text: #66501e;
  --fuwaimg-sunflower-muted: #806b36;
  --fuwaimg-sunflower-border: #efdea3;
  --fuwaimg-sunflower-hover: #fff5ce;
  --fuwaimg-sunflower-active: #fae7a0;
  --fuwaimg-sunflower-focus: #8a6500;
  color: var(--fuwaimg-sunflower-text);
  color-scheme: light;
}

#fuwaimg_mask {
  background: rgb(252 243 208 / 88%);
  backdrop-filter: blur(12px);
}

#fuwaimg_inner {
  border-radius: 0;
  border: none;
  background: var(--fuwaimg-sunflower-surface);
  box-shadow: 0 24px 80px rgb(110 88 25 / 16%), 0 4px 16px rgb(110 88 25 / 6%);
}

#fuwaimg_img {
  background: var(--fuwaimg-sunflower-canvas);
}

#fuwaimg_loading {
  color: var(--fuwaimg-sunflower-muted);
}

#fuwaimg_caption {
  border-top: 1px solid var(--fuwaimg-sunflower-border);
  background: var(--fuwaimg-sunflower-surface);
}

#fuwaimg_count {
  color: var(--fuwaimg-sunflower-muted);
  font-variant-numeric: tabular-nums;
}

#fuwaimg button {
  border-radius: 0;
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* 画像送りの矢印は基本CSSの色をそのまま使用します。 */
#fuwaimg button:not(#fuwaimg_prev):not(#fuwaimg_next) {
  color: var(--fuwaimg-sunflower-text);
}

#fuwaimg #fuwaimg_prev .fuwaimg_icon, #fuwaimg #fuwaimg_next .fuwaimg_icon {
    filter: drop-shadow(0 0 3px rgb(100 70 12 / 80%));
}

#fuwaimg button:focus-visible {
  outline-color: var(--fuwaimg-sunflower-focus);
  background: var(--fuwaimg-sunflower-hover);
}

@media (prefers-reduced-motion: reduce) {
  #fuwaimg button { transition: none; }
}