/* =========================================================
   Another Pattern Site UI v1.0.3
   ========================================================= */

html[data-ap-theme="dark"] {
  color-scheme: dark;

  --ap-ui-bg: var(--ap-dark-bg);
  --ap-ui-surface: var(--ap-dark-surface);
  --ap-ui-surface-2: var(--ap-dark-surface-2);
  --ap-ui-text: var(--ap-dark-text);
  --ap-ui-muted: var(--ap-dark-muted);
  --ap-ui-border: var(--ap-dark-border);
  --ap-ui-primary: var(--ap-dark-primary);
  --ap-ui-secondary: var(--ap-dark-secondary);
}

html[data-ap-theme="light"] {
  color-scheme: light;

  --ap-ui-bg: var(--ap-light-bg);
  --ap-ui-surface: var(--ap-light-surface);
  --ap-ui-surface-2: var(--ap-light-surface-2);
  --ap-ui-text: var(--ap-light-text);
  --ap-ui-muted: var(--ap-light-muted);
  --ap-ui-border: var(--ap-light-border);
  --ap-ui-primary: var(--ap-light-primary);
  --ap-ui-secondary: var(--ap-light-secondary);
}

/* =========================================================
   サイト全体：余白を小さくし、画面幅を広く使う
   ========================================================= */

body.ap-site-ui-enabled {
  background: var(--ap-ui-bg) !important;
  color: var(--ap-ui-text) !important;

  transition:
    background-color .18s ease,
    color .18s ease;
}

body.ap-site-ui-enabled .container {
  width:
    calc(
      100% -
      (
        var(--ap-ui-gutter-x) * 2
      )
    ) !important;

  max-width:
    var(--ap-ui-max-width) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* XWRITE・一般的なWPレイアウト候補 */
body.ap-site-ui-enabled
:is(
  .siteContent,
  .site-content,
  .content-wrapper,
  .main-container,
  .mainContent,
  .main-content,
  .content-area
) {
  gap:
    var(--ap-ui-section-gap) !important;
}

body.ap-site-ui-enabled
:is(
  main,
  .mainContent,
  .main-content,
  .content-area
) {
  margin-top:
    var(--ap-ui-gutter-y) !important;

  margin-bottom:
    var(--ap-ui-gutter-y) !important;
}

body.ap-site-ui-enabled
:is(
  .sidebar,
  .sideBar,
  .widget-area
) {
  flex-basis:
    var(--ap-ui-sidebar-width) !important;

  max-width:
    var(--ap-ui-sidebar-width) !important;
}

body.ap-site-ui-enabled
.widget {
  margin-bottom:
    var(--ap-ui-section-gap) !important;
}

/* =========================================================
   統一カラー
   ========================================================= */

body.ap-site-ui-enabled
:is(
  .mainContent,
  .main-content,
  .content-area,
  .entry-content,
  .widget,
  .sidebar .widget,
  .sideBar .widget
) {
  color:
    var(--ap-ui-text);
}

body.ap-site-ui-enabled
:is(
  .widget,
  .sidebar .widget,
  .sideBar .widget
) {
  border-color:
    var(--ap-ui-border) !important;

  background:
    var(--ap-ui-surface) !important;
}

body.ap-site-ui-enabled
:is(
  input,
  select,
  textarea
) {
  border-color:
    var(--ap-ui-border);

  background:
    var(--ap-ui-surface-2);

  color:
    var(--ap-ui-text);
}

body.ap-site-ui-enabled a {
  text-decoration-color:
    color-mix(
      in srgb,
      var(--ap-ui-primary) 45%,
      transparent
    );
}

/* =========================================================
   Another Pattern Sound Effects
   ========================================================= */

body.ap-site-ui-enabled
.ap-se-library {
  --ap-se-red:
    var(--ap-ui-secondary);

  --ap-se-orange:
    var(--ap-ui-primary);

  --ap-se-blue:
    var(--ap-ui-primary);

  --ap-se-blue-active:
    color-mix(
      in srgb,
      var(--ap-ui-primary) 24%,
      var(--ap-ui-surface)
    );

  --ap-se-border:
    var(--ap-ui-border);

  --ap-se-text:
    var(--ap-ui-text);

  --ap-se-muted:
    var(--ap-ui-muted);

  max-width: none !important;

  color-scheme: normal !important;

  color:
    var(--ap-ui-text) !important;
}

/* フィルター */
body.ap-site-ui-enabled
.ap-se-filter-panel {
  border-color:
    color-mix(
      in srgb,
      var(--ap-ui-primary) 58%,
      var(--ap-ui-border)
    ) !important;

  background:
    var(--ap-ui-surface) !important;
}

/* カード */
body.ap-site-ui-enabled
.ap-se-card {
  border-color:
    var(--ap-ui-border) !important;

  background:
    var(--ap-ui-surface) !important;

  box-shadow:
    0 2px 10px
    color-mix(
      in srgb,
      #000 13%,
      transparent
    ) !important;
}

/* 音源タイトル */
body.ap-site-ui-enabled
.ap-se-title {
  border-color:
    var(--ap-ui-primary) !important;

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--ap-ui-primary) 88%,
        #000
      ),
      color-mix(
        in srgb,
        var(--ap-ui-secondary) 82%,
        #000
      )
    ) !important;

  color:
    #fff !important;
}

/* 一覧見出し */
body.ap-site-ui-enabled
.ap-se-list-title {
  border-bottom-color:
    var(--ap-ui-secondary) !important;

  color:
    var(--ap-ui-secondary) !important;
}

/* タブ */
body.ap-site-ui-enabled
.ap-se-tabs a {
  border-color:
    var(--ap-ui-border) !important;

  background:
    var(--ap-ui-surface-2) !important;

  color:
    var(--ap-ui-text) !important;
}

body.ap-site-ui-enabled
.ap-se-tabs a:hover,
body.ap-site-ui-enabled
.ap-se-tabs a:focus-visible,
body.ap-site-ui-enabled
.ap-se-tabs a.is-active {
  border-color:
    var(--ap-ui-secondary) !important;

  background:
    var(--ap-ui-secondary) !important;

  color:
    #fff !important;
}

/* 検索 */
body.ap-site-ui-enabled
.ap-se-search-input,
body.ap-site-ui-enabled
.ap-se-filter-field select,
body.ap-site-ui-enabled
.ap-se-speed,
body.ap-site-ui-enabled
.ap-se-speed select,
body.ap-site-ui-enabled
.ap-se-toggle,
body.ap-site-ui-enabled
.ap-se-reset {
  border-color:
    var(--ap-ui-border) !important;

  background:
    var(--ap-ui-surface-2) !important;

  color:
    var(--ap-ui-text) !important;
}

body.ap-site-ui-enabled
.ap-se-search-button {
  border: 0 !important;

  background:
    linear-gradient(
      135deg,
      var(--ap-ui-primary),
      color-mix(
        in srgb,
        var(--ap-ui-secondary) 72%,
        var(--ap-ui-primary)
      )
    ) !important;

  color:
    #081018 !important;
}

html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-search-button {
  color: #fff !important;
}

/* お気に入り・リセット */
body.ap-site-ui-enabled
.ap-se-favorite,
body.ap-site-ui-enabled
.ap-se-favorite-filter,
body.ap-site-ui-enabled
.ap-se-filter-reset {
  border-color:
    var(--ap-ui-border) !important;

  background:
    var(--ap-ui-surface-2) !important;

  color:
    var(--ap-ui-text) !important;
}

/* DL */
body.ap-site-ui-enabled
.ap-se-download {
  border-color:
    color-mix(
      in srgb,
      var(--ap-ui-primary) 70%,
      var(--ap-ui-border)
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--ap-ui-primary) 72%,
      var(--ap-ui-surface)
    ) !important;

  color:
    #fff !important;
}

/* 波形背景 */
body.ap-site-ui-enabled
.ap-se-wave-shell {
  border-color:
    var(--ap-ui-border) !important;

  background:
    color-mix(
      in srgb,
      var(--ap-ui-secondary) 10%,
      var(--ap-ui-surface-2)
    ) !important;
}

/* =========================================================
   ライト / ダーク・言語切替
   ========================================================= */

#ap-ui-switchers {
  position: fixed;
  z-index: 2147482500;

  top: 12px;
  right: 12px;

  display: flex;
  gap: 6px;

  pointer-events: auto;
}

body.admin-bar
#ap-ui-switchers {
  top: 44px;
}

.ap-ui-switcher {
  min-height: 34px;
  padding: 6px 10px;

  border:
    1px solid
    var(--ap-ui-border) !important;

  border-radius: 999px !important;

  background:
    color-mix(
      in srgb,
      var(--ap-ui-surface) 92%,
      transparent
    ) !important;

  color:
    var(--ap-ui-text) !important;

  box-shadow:
    0 5px 18px
    rgba(0, 0, 0, .18) !important;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 900px) {

  body.ap-site-ui-enabled
  .container {
    width:
      calc(
        100% -
        max(
          12px,
          var(--ap-ui-gutter-x)
        )
      ) !important;
  }

  body.ap-site-ui-enabled
  :is(
    .sidebar,
    .sideBar,
    .widget-area
  ) {
    max-width: none !important;
    flex-basis: auto !important;
  }

  /*
   * 要望:
   * 効果音タイトルをスマホでは折返す。
   */
  body.ap-site-ui-enabled
  .ap-se-title {
    overflow: visible !important;

    max-width: 100% !important;
    min-width: 0 !important;

    text-overflow:
      clip !important;

    white-space:
      normal !important;

    overflow-wrap:
      anywhere !important;

    word-break:
      break-word !important;

    line-height:
      1.45 !important;
  }

  #ap-ui-switchers {
    top: 8px;
    right: 8px;
  }

  body.admin-bar
  #ap-ui-switchers {
    top: 54px;
  }

  .ap-ui-switcher {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {

  body.ap-site-ui-enabled
  .container {
    width:
      calc(
        100% - 8px
      ) !important;
  }

  body.ap-site-ui-enabled
  .ap-se-card {
    padding:
      8px !important;
  }

  body.ap-site-ui-enabled
  .ap-se-filter-panel {
    padding:
      10px !important;
  }

  body.ap-site-ui-enabled
  .ap-se-grid {
    gap:
      10px !important;
  }
}


/* =========================================================
   AP SITE UI v1.0.2 VISIBILITY FIX
   v1.0.1で未同梱だった視認性修正を確実に適用
   ========================================================= */

/* ---------- 全体背景 ---------- */

html[data-ap-theme="dark"] body.ap-site-ui-enabled,
html[data-ap-theme="dark"] body.ap-site-ui-enabled #page,
html[data-ap-theme="dark"] body.ap-site-ui-enabled .site,
html[data-ap-theme="dark"] body.ap-site-ui-enabled .siteContent,
html[data-ap-theme="dark"] body.ap-site-ui-enabled .main,
html[data-ap-theme="dark"] body.ap-site-ui-enabled .mainContent,
html[data-ap-theme="dark"] body.ap-site-ui-enabled .content-area {
  background: var(--ap-ui-bg) !important;
  color: var(--ap-ui-text) !important;
}

html[data-ap-theme="light"] body.ap-site-ui-enabled,
html[data-ap-theme="light"] body.ap-site-ui-enabled #page,
html[data-ap-theme="light"] body.ap-site-ui-enabled .site,
html[data-ap-theme="light"] body.ap-site-ui-enabled .siteContent,
html[data-ap-theme="light"] body.ap-site-ui-enabled .main,
html[data-ap-theme="light"] body.ap-site-ui-enabled .mainContent,
html[data-ap-theme="light"] body.ap-site-ui-enabled .content-area {
  background: var(--ap-ui-bg) !important;
  color: var(--ap-ui-text) !important;
}

/* ---------- ヘッダー / コンテンツ / ウィジェット ---------- */

html[data-ap-theme] body.ap-site-ui-enabled #header,
html[data-ap-theme] body.ap-site-ui-enabled .header,
html[data-ap-theme] body.ap-site-ui-enabled .main .block,
html[data-ap-theme] body.ap-site-ui-enabled .widget,
html[data-ap-theme] body.ap-site-ui-enabled .articleListContainer {
  background: var(--ap-ui-surface) !important;
  border-color: var(--ap-ui-border) !important;
  color: var(--ap-ui-text) !important;
}

html[data-ap-theme="light"] body.ap-site-ui-enabled #header,
html[data-ap-theme="light"] body.ap-site-ui-enabled .header,
html[data-ap-theme="light"] body.ap-site-ui-enabled .main .block,
html[data-ap-theme="light"] body.ap-site-ui-enabled .widget {
  box-shadow: 0 3px 16px rgba(20,32,51,.08) !important;
}

/* ---------- 効果音一覧見出し ---------- */

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-list-heading-row {
  background: transparent !important;
  color: var(--ap-ui-text) !important;
}

html[data-ap-theme] body.ap-site-ui-enabled
.ap-se-list-heading-row .ap-se-list-title,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-list-title {
  margin: 0 !important;
  padding: 8px 12px !important;

  border: 1px solid var(--ap-ui-border) !important;
  border-left: 5px solid var(--ap-ui-secondary) !important;
  border-bottom: 1px solid var(--ap-ui-border) !important;
  border-radius: 7px !important;

  background: var(--ap-ui-surface-2) !important;
  color: var(--ap-ui-text) !important;

  text-shadow: none !important;
}

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-result-count {
  color: var(--ap-ui-text) !important;
  opacity: 1 !important;
}

/* ---------- フィルター ---------- */

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-filter-panel {
  background: var(--ap-ui-surface) !important;
  border-color: var(--ap-ui-border) !important;
  color: var(--ap-ui-text) !important;
}

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-filter-label,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-filter-field > span,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-per-page,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-per-page-label,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-per-page-separator {
  color: var(--ap-ui-text) !important;
  opacity: 1 !important;
}

html[data-ap-theme] body.ap-site-ui-enabled
input.ap-se-search-input[type="search"],
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-filter-field select,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-speed,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-speed select,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-toggle,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-reset {
  background: var(--ap-ui-surface-2) !important;
  border-color: var(--ap-ui-border) !important;
  color: var(--ap-ui-text) !important;
}

html[data-ap-theme] body.ap-site-ui-enabled
input.ap-se-search-input[type="search"]::placeholder {
  color: var(--ap-ui-muted) !important;
  opacity: 1 !important;
}

/* ---------- 効果音カード ---------- */

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-card {
  background: var(--ap-ui-surface) !important;
  border-color: var(--ap-ui-border) !important;
  color: var(--ap-ui-text) !important;
}

/* ---------- 再生ボタン ---------- */

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-play {
  background:
    linear-gradient(
      145deg,
      var(--ap-ui-primary),
      color-mix(
        in srgb,
        var(--ap-ui-primary) 60%,
        var(--ap-ui-secondary)
      )
    ) !important;

  border: 1px solid var(--ap-ui-primary) !important;
  color: #fff !important;

  box-shadow:
    0 4px 14px
    color-mix(
      in srgb,
      var(--ap-ui-primary) 25%,
      transparent
    ) !important;
}

/* ---------- お気に入り星：常に黄色 ---------- */

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-favorite {
  background: var(--ap-ui-surface-2) !important;
  border-color: var(--ap-ui-border) !important;

  color: #ffd84d !important;
  -webkit-text-fill-color: #ffd84d !important;

  text-shadow:
    0 0 7px rgba(255,216,77,.35) !important;
}

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-favorite.is-active {
  color: #ffbd00 !important;
  -webkit-text-fill-color: #ffbd00 !important;

  background:
    color-mix(
      in srgb,
      #ffd84d 14%,
      var(--ap-ui-surface)
    ) !important;
}

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-favorite-filter {
  color: #ffd84d !important;
}

/* ---------- DL数 ---------- */

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-download-count {
  color: var(--ap-ui-text) !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

/* ---------- 波形下の秒数 ---------- */

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-time,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-current-time,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-duration,
html[data-ap-theme] body.ap-site-ui-enabled .ap-se-selection-time {
  color: var(--ap-ui-text) !important;
  opacity: 1 !important;
}

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-selection-time {
  font-weight: 900 !important;
}

/* ---------- 波形 ---------- */

html[data-ap-theme] body.ap-site-ui-enabled .ap-se-wave-shell {
  border: 1px solid var(--ap-ui-border) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}

html[data-ap-theme="dark"] body.ap-site-ui-enabled .ap-se-wave-shell {
  background:
    color-mix(
      in srgb,
      var(--ap-ui-primary) 7%,
      var(--ap-ui-surface-2)
    ) !important;
}

html[data-ap-theme="dark"] body.ap-site-ui-enabled .ap-se-waveform {
  opacity: 1 !important;
  filter:
    brightness(1.55)
    contrast(1.4)
    saturate(1.35) !important;
}

html[data-ap-theme="light"] body.ap-site-ui-enabled .ap-se-wave-shell {
  background: #ffffff !important;
}

html[data-ap-theme="light"] body.ap-site-ui-enabled .ap-se-waveform {
  opacity: 1 !important;

  /*
   * WaveSurferが薄い色で描画されても
   * ライトモードで見えるよう強くする。
   */
  filter:
    brightness(.60)
    contrast(3.2)
    saturate(1.8) !important;
}

/* Regions Plugin の選択範囲 */
html[data-ap-theme="dark"] body.ap-site-ui-enabled
.ap-se-waveform ::part(region) {
  background:
    color-mix(
      in srgb,
      var(--ap-ui-primary) 15%,
      transparent
    ) !important;
}

html[data-ap-theme="light"] body.ap-site-ui-enabled
.ap-se-waveform ::part(region) {
  background:
    color-mix(
      in srgb,
      var(--ap-ui-secondary) 12%,
      transparent
    ) !important;
}

/* ---------- ライトモード：フォーム・サイドバー ---------- */

html[data-ap-theme="light"] body.ap-site-ui-enabled input[type="search"],
html[data-ap-theme="light"] body.ap-site-ui-enabled input[type="text"],
html[data-ap-theme="light"] body.ap-site-ui-enabled select,
html[data-ap-theme="light"] body.ap-site-ui-enabled textarea {
  background: var(--ap-ui-surface-2) !important;
  border-color: var(--ap-ui-border) !important;
  color: var(--ap-ui-text) !important;
}

html[data-ap-theme="light"] body.ap-site-ui-enabled .footer,
html[data-ap-theme="light"] body.ap-site-ui-enabled .copyright {
  background: var(--ap-ui-surface) !important;
  border-color: var(--ap-ui-border) !important;
  color: var(--ap-ui-text) !important;
}

/* ---------- スマホタイトル折返し ---------- */

@media (max-width: 900px) {
  html[data-ap-theme] body.ap-site-ui-enabled .ap-se-title {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;

    white-space: normal !important;
    text-overflow: clip !important;

    word-break: break-word !important;
    overflow-wrap: anywhere !important;

    line-height: 1.45 !important;
  }
}


/* =========================================================
   AP SITE UI v1.0.3
   一覧見出し削除 / ライトモード黒残り / 表示件数50
   ========================================================= */

/* ---------------------------------------------------------
   1. 「効果音一覧」行そのものを削除
   --------------------------------------------------------- */

html[data-ap-theme]
body.ap-site-ui-enabled
.ap-se-list-heading-row {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

/* 見出しを消したぶん上へ詰める */
html[data-ap-theme]
body.ap-site-ui-enabled
.ap-se-filter-panel {
  margin-bottom: 8px !important;
}

html[data-ap-theme]
body.ap-site-ui-enabled
.ap-se-grid {
  margin-top: 0 !important;
}


/* ---------------------------------------------------------
   2. ライトモード
   効果音ページ内に残る黒背景を強制的にライト化
   --------------------------------------------------------- */

/*
 * XWRITEの実際のコンテンツラッパー名が複数あるため
 * Sound Effectsライブラリを含むページだけ広めに上書き。
 */
html[data-ap-theme="light"]
body.ap-site-ui-enabled:has(.ap-se-library)
:is(
  .main,
  .mainContent,
  .main-content,
  .content-area,
  .content-wrapper,
  .article,
  article,
  .articleBody,
  .article-body,
  .entry-content,
  .post-content,
  .postContent,
  .block,
  .page-content,
  .single-content
) {
  background: var(--ap-ui-surface) !important;
  color: var(--ap-ui-text) !important;
}

/* 上の親階層に含まれない場合でもライブラリ自身は白くする */
html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-library {
  background: var(--ap-ui-surface) !important;
  color: var(--ap-ui-text) !important;
}

/*
 * ライブラリ周辺の直近コンテナ。
 * :has()対応ブラウザ（現行Chrome/Safari/Firefox）向け。
 */
html[data-ap-theme="light"]
body.ap-site-ui-enabled
:is(
  div,
  section,
  article
):has(> .ap-se-library) {
  background: var(--ap-ui-surface) !important;
  color: var(--ap-ui-text) !important;
}

/* パンくず・ページタイトルのある内側ラッパーにも適用 */
html[data-ap-theme="light"]
body.ap-site-ui-enabled:has(.ap-se-library)
:is(
  .block,
  .blockContents,
  .block-content,
  .entry,
  .entryBody,
  .entry-body
) {
  background: var(--ap-ui-surface) !important;
  color: var(--ap-ui-text) !important;
}


/* ---------------------------------------------------------
   3. ライトモードのフィルターを完全ライト化
   --------------------------------------------------------- */

html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-filter-panel {
  background: #ffffff !important;
  border-color: var(--ap-ui-border) !important;
}

html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-filter-field > span,
html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-per-page,
html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-per-page-label,
html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-per-page-separator {
  color: var(--ap-ui-text) !important;
  opacity: 1 !important;
}


/* ---------------------------------------------------------
   4. 表示件数 25 / 50 / 100 / 200
   選択中の「50」が白背景で消えないようにする
   --------------------------------------------------------- */

html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-per-page a {
  color: var(--ap-ui-primary) !important;
  opacity: 1 !important;
}

html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-per-page a.is-active,
html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-per-page a[aria-current="page"] {
  min-width: 28px !important;

  padding: 3px 6px !important;

  border-radius: 5px !important;

  background: var(--ap-ui-primary) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-weight: 900 !important;

  text-decoration: none !important;

  box-shadow:
    0 0 0 1px
    color-mix(
      in srgb,
      var(--ap-ui-primary) 30%,
      transparent
    ) !important;
}

/* ダークも選択中を少し分かりやすく */
html[data-ap-theme="dark"]
body.ap-site-ui-enabled
.ap-se-per-page a.is-active,
html[data-ap-theme="dark"]
body.ap-site-ui-enabled
.ap-se-per-page a[aria-current="page"] {
  min-width: 28px !important;

  padding: 3px 6px !important;

  border-radius: 5px !important;

  background:
    color-mix(
      in srgb,
      var(--ap-ui-primary) 20%,
      var(--ap-ui-surface-2)
    ) !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ---------------------------------------------------------
   5. ライト時の効果音カード周囲も白系に統一
   --------------------------------------------------------- */

html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-card,
html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-filter-panel,
html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-library {
  box-shadow:
    0 2px 12px
    rgba(20, 32, 51, .06) !important;
}

/* タブ周辺の空間も黒くしない */
html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-tabs {
  background: transparent !important;
}


/* ---------------------------------------------------------
   6. ライトモード時、ページ内部の黒固定色を持つ
      一般的なXWRITEラッパーを白へ
   --------------------------------------------------------- */

html[data-ap-theme="light"]
body.wp-theme-xwrite.ap-site-ui-enabled:has(.ap-se-library)
.main .block {
  background: var(--ap-ui-surface) !important;
}

html[data-ap-theme="light"]
body.wp-theme-xwrite.ap-site-ui-enabled:has(.ap-se-library)
.main .block > * {
  border-color: var(--ap-ui-border);
}

/* ただし音源タイトル等の意図したグラデーションは維持 */
html[data-ap-theme="light"]
body.ap-site-ui-enabled
.ap-se-title {
  color: #ffffff !important;
}