/*
 * Immersive Navi だけの部品（2026-10-05）。
 * 見た目はほかのメディア（yR Media・LeLAS Journal）と全く同じにする（2026-10-05 カツ「一旦全く同じデザインにして」）。
 * だから base.css（yR Media の最新の複製）は一文字も変えず、色も上書きしない。ここには base.css に無い部品だけを置き、色は base.css の変数を使う。
 *
 * 写真の代わり：公演の写真・ロゴは主催者のものなので使わない（手引き 5-2 の4）。写真が入る枠には、ジャンルの記号を描いた絵（.ev-art）を入れる。
 */

/* ================= 写真の代わりの絵 ================= */
.ev-art {
  --g: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .16), transparent 45%),
    linear-gradient(140deg, var(--g), color-mix(in srgb, var(--g) 60%, #000));
}
.ev-art svg { width: 34%; max-width: 64px; aspect-ratio: 1; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ev-art__genre { font-family: var(--latin); font-size: 13px; letter-spacing: .2em; }
/* トップの大きな枠（.pick）の中では、写真と同じく枠いっぱいに敷く */
.pick .ev-art { position: absolute; inset: 0; }
.pick .ev-art svg { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 18%; }
.pick .ev-art__genre { display: none; }
/* 新作の格子（.pgrid）・カード・小さな一覧では、写真と同じ比率の箱 */
.pitem .ev-art { aspect-ratio: 1 / 1; }
.card__img .ev-art { aspect-ratio: 16 / 9; }
.mini .ev-art { grid-row: span 2; width: 88px; height: 88px; gap: 0; }
.mini .ev-art__genre, .side-art .ev-art__genre, .side-item .ev-art__genre, .rel .ev-art__genre { display: none; }
.side-art .ev-art, .side-item .ev-art { width: 72px; height: 72px; flex: none; }
.rel .ev-art { grid-row: span 3; width: 120px; height: 120px; }
@media (max-width: 760px) { .rel .ev-art { width: 96px; height: 96px; } }
.ev-art--hero { aspect-ratio: 16 / 9; margin: 0 0 24px; }
.ev-art--hero svg { width: 14%; }

/* ================= 札 ================= */
.ev-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.ev-badge { display: inline-block; padding: 0 8px; font-size: 11px; line-height: 1.8; letter-spacing: .08em; border: 1px solid var(--line); color: var(--text-strong); background: #fff; text-decoration: none; }
.ev-badge--now { background: var(--ink); border-color: var(--ink); color: #fff; }
.ev-badge--last { border-color: var(--rose); color: var(--rose); }
.pitem__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--text-sub); line-height: 1.6; }

/* ================= 公演の一覧の絞り込み（.chips と同じ線の見た目） ================= */
.ev-filter { margin: 0 0 28px; border-top: 1px solid var(--line); }
.ev-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ev-filter__label { width: 6em; font-size: 13px; color: var(--text-strong); }
.ev-filter__chip { display: inline-flex; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); font-size: 13px; text-decoration: none; color: var(--text-strong); }
.ev-filter__chip span { color: var(--text-sub); }
.ev-filter__chip.is-on { background: #3a3a3a; border-color: #3a3a3a; color: #fff; }
.ev-filter__chip.is-on span { color: rgba(255, 255, 255, .7); }
.ev-filter__chip:hover { background: var(--panel); }
.ev-filter__chip.is-on:hover { background: #222; }
@media (max-width: 760px) { .ev-filter__label { width: 100%; } }
.ev-count { margin: 0 0 12px; font-size: 13px; color: var(--text-sub); }
.ev-empty { padding: 24px; background: var(--panel); font-size: 14px; }
.ev-note { margin-top: 32px; font-size: 13px; color: var(--text-sub); line-height: 1.8; }
.block > .pgrid + .ev-ended { margin-top: 44px; }

/* ================= 公演1件（.nart の記事ページと同じ組み） ================= */
.ev-info { display: grid; grid-template-columns: 8em 1fr; margin: 0 0 32px; border-top: 1px solid var(--line); font-size: 14px; }
.ev-info dt, .ev-info dd { margin: 0; padding: 12px 4px; border-bottom: 1px solid var(--line); line-height: 1.75; }
.ev-info dt { color: var(--text-strong); }
.ev-info small { font-size: 13px; color: var(--text-sub); }
@media (max-width: 560px) { .ev-info { grid-template-columns: 6em 1fr; } }
.ev-cta { margin: 0 0 32px; }
.ev-cta a { display: block; padding: 13px; margin-bottom: 10px; text-align: center; text-decoration: none; font-size: 14px; letter-spacing: .1em; }
.ev-cta__main { background: #3a3a3a; color: #fff; }
.ev-cta__main:hover { background: #222; }
.ev-cta__sub { border: 1px solid #3a3a3a; color: var(--text-strong); }
.ev-cta__sub:hover { background: var(--panel); }
.ev-cta__note { margin: 4px 0 0; font-size: 12px; color: var(--text-sub); }
.ev-ended-note { padding: 12px 16px; background: var(--gray); font-size: 14px; }

/* ================= 記事の頭の札（出演者が書いた記事など） ================= */
.disclose { margin: 0 0 1.6em !important; padding: 12px 16px; background: var(--panel); font-size: 13px !important; line-height: 1.8 !important; }

/* about・privacy の「まとめ」（base.css は誌面の中だけ） */
.nart .insh { background: var(--panel); padding: 20px 22px; margin: 1.2em 0 2em; }
.nart .insh__label { margin: 0 0 10px; font-weight: 700; font-size: 14px; color: var(--text-strong); letter-spacing: .1em; }
.nart .insh__label span { font-weight: 400; margin-left: .8em; color: var(--text-sub); font-size: 12px; }
.nart .insh ul { list-style: none; padding: 0; margin: 0; font-size: 15px; line-height: 1.8; }
.nart .insh li { position: relative; padding-left: 1.2em; margin: .4em 0; }
.nart .insh li::before { content: ""; position: absolute; left: .1em; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.nart code { font-size: 13px; background: var(--gray); padding: 1px 4px; word-break: break-all; }
.about-dl dt { color: var(--text-strong); margin-top: 12px; }
.about-dl dd { margin: 4px 0 0; padding-left: 1em; border-left: 3px solid var(--blush); }

/* ブランドの帯（写真の代わりに暗い地。文字の置き方は base.css のまま） */
.brandband--plain { background: var(--night); aspect-ratio: 12 / 5; }
.brandband--plain .brandband__text { position: absolute; }
@media (max-width: 760px) { .brandband--plain { aspect-ratio: 4 / 3; } }

/* ロゴは字が2つ（IN）で縦横比が yR と違うので、幅ではなく高さを yR のロゴ（84×35・スマホ 68×28）にそろえる */
.site-logo img { width: auto; height: 35px; }
@media (max-width: 760px) { .site-logo img { width: auto; height: 28px; } }
.side-about__logo { width: auto; height: 40px; }

/* 画像の無い記事の代わりの帯（カテゴリの一覧など） */
.noimg { display: grid; place-items: center; color: #fff; font-size: 12px; letter-spacing: .1em; text-align: center; background: var(--ink); }

/* ================= 主催者の共有用の画像（OGP） =================
 * 見切れないように、枠は OGP の標準の形（1200:630）にそろえ、画像は枠の中に全体を収める（2026-10-05 カツ）。
 * 形の違う画像は、余白を淡い灰色で埋める。ジャンルの絵（.ev-art）も同じ枠の形にそろえて、並びをそろえる */
.ev-img { display: block; background: var(--gray); overflow: hidden; }
.ev-img img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; transition: none; }
.pitem .ev-img, .pitem .ev-art, .card__img .ev-img, .card__img .ev-art { aspect-ratio: 1200 / 630; }
.pitem:hover .ev-img img { scale: 1; }
.pick .ev-img { position: absolute; inset: 0; background: #1d2733; }
.pick .ev-img img { position: absolute; inset: 0; }
.mini .ev-img { grid-row: span 2; width: 88px; height: 88px; }
.side-art .ev-img, .side-item .ev-img { width: 72px; height: 72px; flex: none; }
.rel .ev-img { grid-row: span 3; width: 120px; height: 120px; }
@media (max-width: 760px) { .rel .ev-img { width: 96px; height: 96px; } }
/* 公演のページは、画像をそのままの形で全部見せる */
.ev-img--hero { margin: 0 0 8px; background: none; }
.ev-img--hero img { height: auto; }
.ev-img-credit { margin: 0 0 24px; font-size: 12px; color: var(--text-sub); }
/* 横長の枠では、ジャンルの記号を枠の高さに合わせる（幅に合わせると文字がはみ出す） */
.pitem .ev-art svg, .card__img .ev-art svg { width: auto; height: 38%; max-width: none; }
.pitem .ev-art, .card__img .ev-art { gap: 4px; }
/* 縦長のチラシが画面を埋めないよう、公演のページの画像は高さを抑える（見切れない） */
.ev-img--hero { text-align: center; }
.ev-img--hero img { width: auto; max-width: 100%; max-height: 640px; margin: 0 auto; }
@media (max-width: 760px) { .ev-img--hero img { max-height: 480px; } }