@charset "UTF-8";

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

#fuwaimg {
  --fuwaimg-nemophila-surface: #fff;
  --fuwaimg-nemophila-canvas: #f4faff;
  --fuwaimg-nemophila-text: #294d69;
  --fuwaimg-nemophila-muted: #526f86;
  --fuwaimg-nemophila-border: #c4dfef;
  --fuwaimg-nemophila-hover: #e1f2fc;
  --fuwaimg-nemophila-active: #cce7f7;
  --fuwaimg-nemophila-focus: #216da6;
  color: var(--fuwaimg-nemophila-text);
  color-scheme: light;
}

#fuwaimg_mask {
  background: rgb(220 239 250 / 88%);
  backdrop-filter: blur(12px);
}

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

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

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

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

#fuwaimg_count {
  color: var(--fuwaimg-nemophila-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-nemophila-text);
}

#fuwaimg #fuwaimg_prev .fuwaimg_icon, #fuwaimg #fuwaimg_next .fuwaimg_icon {
    filter: drop-shadow(0 0 3px rgb(22 65 105 / 78%));
}

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

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