/* SAYA v32 — イラストレーター別 鑑定個体数（POP）一覧（site/pop/artist/index.html）専用。
   色は saya-shell.css のトークンのみ（ダーク/ライト両対応。影の黒だけ例外）。共通部品は v32.css（.v-hero .v-stat .v-row .v-bar .v-tab .v-chip .v-podium .v-pod .v-shop .v-search .v-more .v-faq .v-foot-note）。
   生成: tools/build_artist_index.py */
.content main.ars{max-width:1180px}
.v32 [hidden]{display:none!important}
.v32.ars a:focus-visible,.v32.ars button:focus-visible,.v32.ars input:focus-visible,.v32.ars summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px}

/* ---- 最初の画面に入るまでバーを止めておく（JSがある時だけ。JS無しは最初から伸びる） ---- */
.ar-io .ars [data-io]:not(.in) .v-bar i{animation-play-state:paused}
.ars .v-bar i{animation-duration:1.1s}
.ars .ar-tot .v-bar i{animation-delay:.06s}
.ars .ar-rt .v-bar i{animation-delay:.2s}
.ars .ar-pr .v-bar i{animation-delay:.25s}

/* ---- ヒーロー ---- */
.v32 .ar-hero{padding-top:24px;padding-bottom:22px;margin-bottom:6px}
.v32 .ar-hero h1{margin:8px 0 6px}
.v32 .ar-hero .v-lead{font-size:16px;font-weight:500;color:var(--text2);max-width:34ch}
.v32 .ar-hero .v-stats{margin-top:16px;gap:8px}
.v32 .ar-hero .v-stat{min-width:104px;padding:8px 14px 8px}
.v32 .ar-hero .v-stat b small{font:500 .52em 'IBM Plex Sans JP',sans-serif;color:var(--dim);margin-left:3px}
.v32 .ar-hero .v-stat b.g small{color:var(--dim)}
.v32 .ar-hero .ar-share{min-width:152px}
.v32 .ar-hero .ar-share .v-bar{margin-top:7px}
.v32 .ar-hero .v-cta{margin-top:14px;gap:8px}
.v32 .ar-hero .v-btn{padding:7px 13px;font-size:12.5px;border-radius:10px}
.v32 .ar-fan{position:absolute;right:30px;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none}
.v32 .ar-fan .ar-fc{margin-left:-30px;border-radius:7px;animation:arfan .7s cubic-bezier(.2,.7,.2,1) both}
.v32 .ar-fan .ar-fc:first-child{margin-left:0}
.v32 .ar-fan .ar-fc:nth-child(1){--r:-9deg;--y:10px}
.v32 .ar-fan .ar-fc:nth-child(2){--r:-4.5deg;--y:0px;animation-delay:.05s}
.v32 .ar-fan .ar-fc:nth-child(3){--r:0deg;--y:-10px;z-index:2;animation-delay:.1s}
.v32 .ar-fan .ar-fc:nth-child(4){--r:4.5deg;--y:0px;animation-delay:.15s}
.v32 .ar-fan .ar-fc:nth-child(5){--r:9deg;--y:10px;animation-delay:.2s}
.v32 .ar-fan .ar-fc{transform:translateY(var(--y)) rotate(var(--r))}
@keyframes arfan{from{opacity:0;transform:translateY(calc(var(--y) + 18px)) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.v32 .ar-fan .ar-fc{animation:none}}

/* ---- 見出し ---- */
.v32.ars .v-h2{margin:26px 0 12px}
.v32.ars .v-h2 small{font:700 13px 'JetBrains Mono',monospace;color:var(--text2)}

/* ---- アバター（代表カードのイラスト部分を丸く切り出し／無ければ頭文字） ---- */
.v32 .ar-pic{display:block;flex:0 0 auto;width:52px;height:52px;border-radius:50%;background-color:var(--card2);background-repeat:no-repeat;background-size:1600px auto;
  box-shadow:0 0 0 2px var(--line2),0 3px 10px rgba(0,0,0,.25)}
.v32 .ar-pic.ini{display:grid;place-items:center;background-image:none;font:700 21px/1 'IBM Plex Sans JP',system-ui,sans-serif}
.v32 .ar-pic.c0{background-color:color-mix(in srgb,var(--cyan) 18%,var(--card2));color:var(--cyan)}
.v32 .ar-pic.c1{background-color:color-mix(in srgb,var(--green) 18%,var(--card2));color:var(--green)}
.v32 .ar-pic.c2{background-color:color-mix(in srgb,var(--amber) 18%,var(--card2));color:var(--amber)}
.v32 .ar-pic.c3{background-color:color-mix(in srgb,var(--red) 16%,var(--card2));color:var(--red)}
.v32 .ar-pic.c4{background-color:color-mix(in srgb,var(--text2) 16%,var(--card2));color:var(--text2)}
.v32 .ar-pic.ar-pic-lg{width:64px;height:64px;font-size:26px}

/* ---- 表彰台 ---- */
.v32 .ar-podium{align-items:end;gap:14px;margin:8px 0 6px}
.v32 .v-pod.ar-pod{--m:var(--amber);gap:9px;padding:22px 14px 16px;border-radius:18px;border-color:color-mix(in srgb,var(--m) 38%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--m) 15%,transparent),transparent 64%),var(--card);transition:transform .15s,border-color .15s}
.v32 .v-pod.ar-pod.p1{order:2;padding-top:34px;padding-bottom:20px;box-shadow:0 18px 46px -24px color-mix(in srgb,var(--amber) 70%,transparent)}
.v32 .v-pod.ar-pod.p2{order:1;--m:var(--text2)}
.v32 .v-pod.ar-pod.p3{order:3;--m:color-mix(in srgb,var(--amber) 55%,var(--red))}
.v32 a.v-pod.ar-pod:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--m) 70%,transparent)}
.v32 .v-pod.ar-pod .no{color:var(--m);font-size:26px;line-height:1}
.v32 .ar-pthumb{display:block;position:relative;flex:0 0 auto}
.v32 .ar-pthumb .vt{border-radius:7px}
.v32 .ar-pod.p1 .ar-pthumb{transform:scale(1.14);transform-origin:center bottom;margin-bottom:6px}
.v32 .ar-pod.p2 .ar-pthumb{transform:rotate(-3deg)}
.v32 .ar-pod.p3 .ar-pthumb{transform:rotate(3deg)}
.v32 .ar-pbody{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;width:100%}
.v32 .ar-pod b{font-size:15px;line-height:1.35}
.v32 .ar-pod .big{font:700 clamp(22px,3vw,30px)/1.1 'JetBrains Mono',monospace;color:var(--green);font-variant-numeric:tabular-nums}
.v32 .ar-pod .big small,.v32 .ar-m b small{font:500 11px 'IBM Plex Sans JP',sans-serif;color:var(--dim);margin-left:3px}
.v32 .ar-pr{display:grid;gap:5px;width:100%;max-width:200px;margin-top:2px}
.v32 .ar-pr .s{font-size:11.5px;color:var(--dim)}
.v32 .ar-pr .s b{font:700 12px 'JetBrains Mono',monospace;color:var(--text)}
.v32 .ar-pr .v-bar{display:block}

/* ---- 操作 ---- */
.v32 .ar-tools{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;margin:4px 0 10px}
.v32 .ar-tools .v-search{flex:1 1 100%;margin:4px 0 2px}
.v32 .ar-tools .v-search input[type=search]{font-size:16px}
.v32 .ar-grp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v32 .ar-grp .v-tabs{margin:4px 0}
.v32 .ar-lb{font:700 11px/1 'IBM Plex Sans JP',sans-serif;letter-spacing:.14em;color:var(--dim)}
.v32 .ar-tools .v-tab{padding:6px 13px;font-size:12.5px}

/* ---- 一覧 ---- */
.v32 .ar-list{gap:8px;margin:6px 0}
.v32 .ar-head,.v32 .v-row.ar-row{grid-template-columns:30px 52px minmax(0,1fr) minmax(0,1.9fr);gap:6px 16px}
.v32 .ar-head{display:grid;align-items:end;padding:0 14px 0 12px;margin:2px 0 -2px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--dim)}
.v32 .ar-ms{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 88px 112px;gap:18px;align-items:center;min-width:0}
.v32 .ar-head[data-sort=t] [data-k=t],.v32 .ar-head[data-sort=r] [data-k=r],.v32 .ar-head[data-sort=g] [data-k=g],.v32 .ar-head[data-sort=w] [data-k=w]{color:var(--cyan)}
.v32 .ar-head[data-sort=t] [data-k=t]::after,.v32 .ar-head[data-sort=r] [data-k=r]::after,.v32 .ar-head[data-sort=g] [data-k=g]::after,.v32 .ar-head[data-sort=w] [data-k=w]::after{content:' ▼'}
.v32 .v-row.ar-row{padding:11px 16px 11px 12px;transition:border-color .15s,background .15s}
.v32 .v-row.ar-row:hover{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));background:var(--card-hi)}
.v32 .ar-rk{width:auto;font-size:15px}
.v32 .ar-av{display:block;line-height:0;border-radius:50%}
.v32 .ar-list .v-row:has(.ar-rk.t1) .ar-pic:not(.ini){box-shadow:0 0 0 2px var(--amber),0 3px 10px rgba(0,0,0,.25)}
.v32 .ar-list .v-row:has(.ar-rk.t2) .ar-pic:not(.ini){box-shadow:0 0 0 2px var(--text2),0 3px 10px rgba(0,0,0,.25)}
.v32 .ar-list .v-row:has(.ar-rk.t3) .ar-pic:not(.ini){box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 55%,var(--red)),0 3px 10px rgba(0,0,0,.25)}
.v32 .ar-nm b{font-size:16px;font-weight:700;line-height:1.35}
.v32 .ar-nm b a{color:var(--text)}
.v32 .ar-nm b a:hover{color:var(--green)}
.v32 .ar-en{font-size:11.5px;color:var(--dim);line-height:1.4}
.v32 .ar-nm span.ar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin-top:3px}
.v32 .ar-meta .v-chip{padding:0 8px;font-size:10.5px;line-height:1.7}
.v32 .ar-pd{font:500 10.5px 'JetBrains Mono',monospace;color:var(--dim);letter-spacing:0;white-space:nowrap}
.v32 .ar-m{display:grid;gap:5px;min-width:0;align-content:center}
.v32 .ar-m::before{content:attr(data-l);display:none;font-size:11px;color:var(--dim)}
.v32 .ar-m b{font:700 15px/1.2 'JetBrains Mono',monospace;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.v32 .ar-tot b{font-size:20px}
.v32 .ar-m > small{font-size:10.5px;color:var(--dim);line-height:1.4}
.v32 .ar-rt b small{margin-left:1px}
.v32 .ar-m b.na{color:var(--mute);font-weight:500}
.v32 .ar-m b.up{color:var(--green)}
.v32 .ar-m b.dn{color:var(--red)}
.v32 .ar-m b.z{color:var(--dim)}
.v32 .ar-m .v-bar{height:6px}
.v32 .ar-tot .v-bar{height:10px}
.v32 .ar-list[data-sort=t] .ar-tot b,.v32 .ar-list[data-sort=r] .ar-rt b,.v32 .ar-list[data-sort=w] .ar-wk b{color:var(--cyan)}
.v32 .ar-list[data-sort=g] .ar-gw b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--cyan)}
.v32 .ar-row .v-shop-mini{grid-column:3/-1;margin-top:2px}
.v32 .ar-list .gearbar{margin:2px 0}
.v32 .ar-morebar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:18px 0 10px}
.v32 .ar-morebar .v-btn{cursor:pointer;font:700 14px/1.3 'IBM Plex Sans JP',sans-serif;min-height:44px;justify-content:center}

/* ---- 母数小の印 / 並べ替え時の注 ---- */
.v32 .ar-bs{display:inline-block;align-self:flex-start;width:fit-content;margin-top:3px;padding:0 8px;border-radius:99px;border:1px solid rgba(255,194,77,.5);background:rgba(255,194,77,.08);color:var(--amber);font:700 10.5px/1.75 'IBM Plex Sans JP',sans-serif;white-space:nowrap}
.v32 .ar-note{flex:1 1 100%;margin:2px 0 0;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,194,77,.35);background:rgba(255,194,77,.07);font-size:12.5px;line-height:1.75;color:var(--text2)}
.v32 .ar-note[hidden]{display:none}
.v32 .ar-note b{color:var(--amber)}

/* ---- SAYAの見かた（母数と増加率） ---- */
.v32 .ar-base{margin:30px 0 8px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:18px;
  background:radial-gradient(520px 220px at 100% -10%,rgba(255,194,77,.10),transparent 70%),var(--card)}
.v32 .ar-base h2{margin:8px 0 8px;padding:0;border:0;font-size:clamp(22px,3.4vw,30px);line-height:1.3;color:var(--text);font-family:'IBM Plex Sans JP',system-ui,sans-serif;font-weight:700;word-break:keep-all;overflow-wrap:anywhere}
.v32 .ar-base h2 em{font-style:normal;background:linear-gradient(90deg,var(--amber),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.v32 .ar-bl{margin:0 0 14px;max-width:62ch;font-size:14.5px;line-height:1.8;color:var(--text2);word-break:keep-all;overflow-wrap:anywhere}
.v32 .ar-bl b{color:var(--text)}
.v32 .ar-sv-w{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:8px 8px 4px}
.v32 .ar-sv{display:block;width:100%;height:auto;max-width:100%;font-family:'IBM Plex Sans JP',sans-serif}
.v32 .ar-sv .g{stroke:var(--line);stroke-width:1}
.v32 .ar-sv .cut{stroke:var(--amber);stroke-width:1.2;stroke-dasharray:4 4;opacity:.8}
.v32 .ar-sv .t{fill:var(--dim);font-size:12.5px}
.v32 .ar-sv .t.lg{fill:var(--text2);font-size:12.5px}
.v32 .ar-sv .p{fill:var(--cyan);fill-opacity:.55;stroke:var(--panel);stroke-width:.6}
.v32 .ar-sv .p.s{fill:var(--amber);fill-opacity:.8}
.v32 .ar-sv .med{stroke:var(--green);stroke-width:3;stroke-linecap:round}
.v32 .ar-sv .m{fill:var(--green);font-size:13px;font-weight:700;paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
.v32 .ar-sv .n{fill:var(--text);font-size:12.5px;font-weight:700;paint-order:stroke;stroke:var(--panel);stroke-width:4px;stroke-linejoin:round}
.v32 .ar-bands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 0}
.v32 .ar-bd{padding:10px 12px 11px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0}
.v32 .ar-bd.sm{border-color:rgba(255,194,77,.45)}
.v32 .ar-bd .lb{display:block;font-size:11px;color:var(--dim);line-height:1.5}
.v32 .ar-bd.sm .lb{color:var(--amber)}
.v32 .ar-bd b{display:block;font:700 20px/1.3 'JetBrains Mono',monospace;color:var(--text);font-variant-numeric:tabular-nums}
.v32 .ar-bd b small{font:500 11px 'IBM Plex Sans JP',sans-serif;color:var(--dim);margin-left:2px}
.v32 .ar-bd dl{margin:6px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;font-size:12px}
.v32 .ar-bd dl div{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--dim)}
.v32 .ar-bd dt{margin:0}
.v32 .ar-bd dd{margin:0;font:700 12.5px 'JetBrains Mono',monospace;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.v32 .ar-bd dd.mx{color:var(--amber)}
.v32 .ar-bp{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.v32 .ar-bp li{padding-left:14px;position:relative;font-size:13.5px;line-height:1.75;color:var(--text2);word-break:keep-all;overflow-wrap:anywhere}
.v32 .ar-bp li::before{content:'';position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--green)}
.v32 .ar-bp li b{color:var(--text)}
.v32 .ar-bgo{margin-top:14px}
.v32 .ar-bgo .v-btn{cursor:pointer;font:700 14px/1.3 'IBM Plex Sans JP',sans-serif;min-height:44px}
@media (max-width:560px){
  .v32 .ar-base{padding:18px 14px 16px}
  .v32 .ar-bands{gap:6px}
  .v32 .ar-bd{padding:9px 9px 10px}
  .v32 .ar-bd b{font-size:17px}
  .v32 .ar-bd dl div{font-size:11px;flex-direction:column;gap:0}
}

/* 注釈（最下段）。saya-base.css の .content p が効いて大きくなるのを抑える */
.v32 .v-foot-note p,.v32 details.v-more .in p{font-size:inherit;line-height:inherit;color:inherit;margin:0 0 6px}
.v32 details.v-more .in p{margin:0 0 10px}
.v32 details.v-more .in p b{color:var(--text)}

/* ---- 狭い画面 ---- */
@media (max-width:900px){
  .v32 .ar-fan{display:none}
  .v32 .ar-head{display:none}
  .v32 .v-row.ar-row{grid-template-columns:26px 52px minmax(0,1fr);gap:8px 12px;padding:12px 12px 12px 10px}
  .v32 .ar-ms{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;padding-top:9px;border-top:1px dashed var(--line)}
  .v32 .ar-m{gap:3px}
  .v32 .ar-tot{grid-column:1/-1}
  .v32 .ar-m::before{display:block}
  .v32 .ar-tot b{font-size:22px}
  .v32 .ar-tot .v-bar{height:8px}
  .v32 .ar-row .v-shop-mini{grid-column:1/-1}
  .v32 .ar-rk{font-size:14px}
}
@media (max-width:560px){
  .v32 .ar-hero .v-lead{font-size:15px}
  .v32 .ar-hero .v-stat{min-width:calc(50% - 4px);flex:1 1 calc(50% - 4px)}
  .v32 .ar-hero .ar-share{min-width:100%;flex-basis:100%}
  .v32 .ar-podium{gap:10px}
  .v32 .v-pod.ar-pod,.v32 .v-pod.ar-pod.p1,.v32 .v-pod.ar-pod.p2,.v32 .v-pod.ar-pod.p3{order:0;flex-direction:row;align-items:center;text-align:left;gap:14px;padding:14px 14px 14px 46px}
  .v32 .v-pod.ar-pod .no{left:14px;top:12px}
  .v32 .ar-pod.p1 .ar-pthumb{transform:none;margin:0}
  .v32 .ar-pbody{align-items:flex-start;flex:1}
  .v32 .ar-pr{max-width:none}
  .v32 .ar-tools .v-search{margin-top:2px}
  .v32 .ar-grp{width:100%}
  .v32 .ar-nm b{font-size:15.5px}
}