/* niji専用。標準の白黒骨格を保ち、プリズムは階層・現在地・選択・操作反応だけに使う。 */
:root {
  --ground:      #FFFFFF;
  --surface:     #FFFFFF;
  --surface-alt: #F3F4F6;
  --line:        #E3E6EA;
  --line-soft:   #EEF0F3;
  --text:        #14213D;
  --text-soft:   #4B5563;
  --text-faint:  #6B7280;
  --accent:      #6940D8;
  --accent-deep: #4B28AA;
  --accent-ink:  #FFFFFF;
  --flag-bg:     #FFFFFF;
  --shadow-card: none;
  --radius: 4px;
  --gap: 10px;
  --niji-cyan:    #00D9FF;
  --niji-blue:    #2F75FF;
  --niji-violet:  #8054FF;
  --niji-magenta: #E900D7;
  --niji-prism: linear-gradient(135deg,
    var(--niji-cyan) 0%, var(--niji-blue) 34%,
    var(--niji-violet) 65%, var(--niji-magenta) 100%);
  /* 白文字を載せる面は、同じ色相を暗くしてコントラストを確保する。 */
  --niji-prism-surface: linear-gradient(135deg,
    #006B83 0%, #2450B8 34%, #6A3BC8 65%, #A20096 100%);
}
.yms-layout-gallery { --gred: var(--accent); }
/* 名前の帯も白。色の帯で顔を作らない */
.yms-brandbar { background: #FFFFFF; border-bottom: 1px solid var(--line); }
.yms-brand { padding: 14px 16px; }
.yms-brand__name { color: var(--text); font-size: 22px; }
.yms-brand__name::after { display: none; }
.yms-brand__id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.yms-brand__tag { margin: 0; color: var(--text-faint); font-size: 12px; }
.yms-searchbar { background: #FFFFFF; border-bottom: 1px solid var(--line-soft); }
.yms-brand .yms-search input, .yms-searchbar .yms-search input { border: 1px solid var(--line); }
.yms-brand .yms-search button, .yms-searchbar .yms-search button { background: var(--text); border-color: var(--text); color: #fff; }
.yms-card__price { color: var(--accent); }
.yms-rankhead h2, .widget__title { font-size: 18px; font-weight: 800; }

/* prism surfaces: 従来の赤い面を、白文字が読める濃色プリズムへ統一する。 */
.yms-gbadge,
.yms-grow__off,
.yms-gbtn--red,
.yms-layout-gallery .yms-price-off,
.yms-layout-gallery .yms-sale-tile__pill,
.yms-wsale__btn,
.yms-wsale__off,
.yms-wsale__pr,
.yms-pxbadge,
.yms-sort a[aria-current="true"],
.yms-flag--deal {
  background: var(--niji-prism-surface) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}

/* prism ink: 価格・割引導線など文字だけの赤は、白地で読める濃い紫へ寄せる。 */
.yms-grow--sale .yms-grow__t time,
.yms-layout-gallery .yms-price-now,
.yms-wsale__p b,
.yms-wsale__more,
.yms-fbn .yms-ghead__en {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* sister current: 細い現在地境界は鮮やかなプリズムをそのまま使う。 */
.yms-sisters a.is-here { border-image: var(--niji-prism) 1; }

/* section start: すべての節見出しに同じプリズムの起点を置く。 */
.yms-ghead {
  position: relative;
  padding-left: 15px;
  border-left: 0;
}
.yms-ghead::before {
  content: "";
  position: absolute;
  inset: 1px auto 0 0;
  width: 3px;
  border-radius: 3px;
  background: var(--niji-prism);
}

/* current location: 現在ページだけを示し、通常リンクには色を配らない。 */
.yms-topbar__nav a[aria-current="page"] {
  position: relative;
  text-decoration: none;
}
.yms-topbar__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 5px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--niji-prism);
}

/* selected state: 選択中のランキング期間とページ番号だけに細い識別線を置く。 */
.yms-grank__tabs label,
.yms-gpager__a,
.navigation.pagination .page-numbers {
  position: relative;
}
.yms-grank__tabs:has(#yms-grank-day:checked) label[for="yms-grank-day"]::after,
.yms-grank__tabs:has(#yms-grank-week:checked) label[for="yms-grank-week"]::after,
.yms-grank__tabs:has(#yms-grank-month:checked) label[for="yms-grank-month"]::after,
.yms-grank__tabs:has(#yms-grank-all:checked) label[for="yms-grank-all"]::after,
.yms-gpager__a.is-current::after,
.navigation.pagination .page-numbers.current::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 3px;
  left: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--niji-prism);
}

/* interaction response: 黒い導線は維持し、hover/focus時だけプリズムで反応する。 */
.yms-gbtn {
  position: relative;
  overflow: hidden;
}
.yms-gbtn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--niji-prism);
  opacity: 0;
}
.yms-gbtn:hover::after,
.yms-gbtn:focus-visible::after { opacity: 1; }

/* content entry: 記事のカテゴリだけをプリズム面にし、本文へ入る現在地を示す。 */
.yms-ghero .yms-gchip--cat {
  background: var(--niji-prism-surface);
  color: #FFFFFF;
}

/* card interaction: 画像は変色させず、選んだカードの下辺だけが発光する。 */
.yms-gpost__cover::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 3px;
  background: var(--niji-prism);
  opacity: 0;
  pointer-events: none;
}
.yms-gpost__cover:hover::after,
.yms-gpost__cover:focus-visible::after { opacity: 1; }

/* taxonomy interaction: 塗りつぶさず、選択候補になったタグ・カテゴリの輪郭だけを変える。 */
.yms-gtag:hover,
.yms-gtag:focus-visible,
.yms-gcat:hover,
.yms-gcat:focus-visible,
.yms-gpill:hover,
.yms-gpill:focus-visible {
  border-color: var(--niji-violet);
  color: var(--accent-deep);
}

/* search interaction: 入力中だけ検索実行部をプリズム面にする。 */
.yms-topbar__search:focus-within input { border-color: var(--niji-violet); }
.yms-topbar__search:focus-within button {
  background: var(--niji-prism-surface);
  border-color: transparent;
}

/* media affordance: 再生できる作品だけ、再生印にプリズムの輪郭を与える。 */
.yms-card--movie .yms-card__cover::after {
  box-shadow: 0 0 0 2px var(--niji-violet);
}

/* saved state: 保存済みは一時的な選択状態なので、旧赤面をプリズム面へ統一する。 */
.yms-bm__btn.is-on {
  background: var(--niji-prism-surface);
  border-color: transparent;
  color: #FFFFFF;
}

/* footer hierarchy: 見出し罫線の先頭を節起点として揃える。 */
.yms-gfoot__col h2 { position: relative; }
.yms-gfoot__col h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 44px;
  height: 1px;
  background: var(--niji-prism);
}

/* keyboard focus: 色だけでなく2pxの輪郭を保つ。 */
.yms-topbar a:focus-visible,
.yms-topbar label:focus-visible,
.yms-gmain a:focus-visible,
.yms-gfoot a:focus-visible,
.yms-topbar__search input:focus-visible,
.yms-topbar__search button:focus-visible {
  outline: 2px solid var(--niji-violet);
  outline-offset: 2px;
}

/* 9/20 深瀬「右脇ランキングの画像の余白が気になる → 絵を大きくして行を絵に合わせる」。
   実測（9/20）: 1 行 64px＝上下 9px＋絵 60×45＋題名 1 行。絵を 84px 幅（63px 高）・上下 5px にする。
   値は面の option（yms_grank_thumb=84 / yms_grank_pad=5・inc-layouts.php の yms_grank_layout）にも入れてある。
   この皮は にじ だけが読むので、ここに書けば他の面は変わらない（PHP 側が届くまでの橋渡しも兼ねる） */
.yms-grank { --yms-grank-thumb: 84px; --yms-grank-pad: 5px; }
/* 9/20 時点の にじ本番の layout-gallery.css は別の作業者（Codex・c85d23f80）が同日に直した版で、
   まだ var() を読まない。皮の側で直に書いて、共通側が追いつくまで同じ見た目にしておく */
.yms-grank__row a { padding: 5px 0; }
.yms-grank__thumb { flex: 0 0 84px; width: 84px; }