/* vtuber.css — VTUBER 一覧（vtuber.html）と VTuber 紹介（talent.html）の共通 */

.sec-cream.sep { --sep-bg: var(--cream); }
.sec[hidden] { display: none; }

/* ---------- 一覧 ---------- */
.kinds { margin-top: 20px; }
.kinds[hidden] { display: none; }
.kinds .chip { min-height: 38px; padding: 0 18px; }
.grid-4 { align-items: start; }
#vt-list { align-items: stretch; } /* タレントのカードは同じ行で高さを揃える */

a.card.v-card { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; padding: 22px 14px 20px; }
.v-card .v-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 1.6em; max-width: 100%; font-size: 12px; } /* 所属・デビュー年。無くても 1 行ぶん空ける */
.v-card .avatar { flex: none; margin-bottom: 6px; transition: transform .25s var(--ease-pop); }
.v-card:hover .avatar { transform: scale(1.05) rotate(-2deg); }
.v-card .h3 { margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.v-card .ruby { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.v-card .note { margin: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.v-card .v-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: auto; padding-top: 6px; max-width: 100%; } /* タグはカードの下端に揃える */
.v-card .chip { max-width: 100%; white-space: normal; text-align: center; line-height: 1.35; padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 767px) {
  .kinds .chip { min-height: 34px; padding: 0 14px; }
  .v-card { padding: 16px 8px 14px; }
  /* スマホではタグが 2 行になる人がいるので、全員 2 行ぶん（タグ 26px × 2 + 隙間 6px + 上の余白 6px）空けて高さを揃える */
  .v-card .v-roles { min-height: 64px; align-content: flex-start; align-items: flex-start; }
}

/* ---------- 紹介：見出し ---------- */
.tl-head { display: flex; align-items: center; gap: 28px; }
.tl-head .avatar { flex: none; }
.tl-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tl-info h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.35; letter-spacing: .03em; color: var(--brown); overflow-wrap: anywhere; }
.tl-info .ruby { margin: -4px 0 0; font-size: 13px; color: var(--ink-soft); }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--ink); }
.tl-meta .chip { cursor: default; }
.tl-links { margin-top: 6px; }
@media (max-width: 767px) {
  .tl-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tl-info h1 { font-size: 24px; }
}

/* ---------- 紹介：本体 ---------- */
.tl-body { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 36px; align-items: start; }
.tl-back { margin: 36px 0 0; }
@media (max-width: 767px) {
  .tl-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tl-back { margin-top: 26px; }
}

.tl-outfit .tabs { margin-bottom: 14px; }
.outfit-frame { display: grid; padding: 14px; border-radius: 28px; background: var(--sky-mist); box-shadow: inset 0 0 0 1.5px var(--line-soft); }
.outfit-panel { grid-area: 1 / 1; display: grid; place-items: center; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.outfit-panel.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.outfit-panel img { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; object-fit: contain; }
@media (max-width: 767px) { .outfit-frame { padding: 10px; border-radius: 22px; } }

.tl-card .kv { grid-template-columns: 5em minmax(0, 1fr); }
.tl-card .txt { margin: 16px 0 0; overflow-wrap: anywhere; }

/* ---------- 紹介：関連作品 ---------- */
.rel { display: block; color: inherit; text-decoration: none; min-width: 0; }
.rel-img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--sky-pale); box-shadow: var(--sh-card); transition: transform .2s var(--ease-pop), box-shadow .2s; }
.rel:hover .rel-img { transform: translateY(-3px); box-shadow: var(--sh-float); }
.rel-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }

.vt-more { margin-top: 20px; }

/* VTuber 様からのお仕事: 絵の縦横が混ざるので、同じ大きさの枠（4:5）に収めて揃える。余った所は同じ絵のぼかしで埋める（切り抜かない） */
#vt-works-list .rel-frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--sky-pale); box-shadow: var(--sh-card); transition: transform .2s var(--ease-pop), box-shadow .2s; }
#vt-works-list .rel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px); transform: scale(1.15); opacity: .7; }
#vt-works-list .rel-img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6px; object-fit: contain; border-radius: 0; background: none; box-shadow: none; transition: none; }
#vt-works-list .rel:hover .rel-img { transform: none; box-shadow: none; }
#vt-works-list .rel:hover .rel-frame { transform: translateY(-3px); box-shadow: var(--sh-float); }
#vt-works-list .rel-t { min-height: 3.2em; }

/* ---------- 紹介の小窓（vtuber.html。gallery の小窓と同じ見た目・同じ動き） ---------- */
body.vm-open { overflow: hidden; }
.vm { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.vm[hidden] { display: none; }
.vm-bg { position: absolute; inset: 0; background: rgba(74, 68, 61, .5); animation: vmFade .3s ease; }
.vm-sheet {
  position: relative; width: 100%; max-width: 860px; max-height: calc(100vh - 56px); overflow-y: auto; overflow-x: hidden;
  padding: 48px 36px 36px; background: var(--white); border-radius: 40px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
  animation: vmPop .45s var(--ease-pop);
}
.vm-bar { position: absolute; left: 38px; top: 14px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--ink-soft); }
.vm-bar .mo-i { --s: 12px; --c: var(--sky-deep); }
.vm-body { min-width: 0; display: grid; gap: 28px; }
.vm-body .tl-info h2.tl-name { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.35; letter-spacing: .03em; color: var(--brown); overflow-wrap: anywhere; }
.vm-body .outfit-panel img { max-height: 60vh; }
.vm-works-h { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--brown); }
.vm-works-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vm-close {
  position: fixed; right: 24px; top: 20px; z-index: 2; width: 54px; height: 54px; border-radius: 50%; background: var(--white); color: var(--brown);
  box-shadow: 0 14px 30px -18px rgba(74, 68, 61, .6), inset 0 0 0 2px var(--sky-soft);
  font-family: var(--f-en); font-weight: 600; font-size: 28px; line-height: 1; display: grid; place-items: center; padding-bottom: 4px;
  transition: transform .25s var(--ease-pop);
}
.vm-close:hover { transform: rotate(90deg); }
@keyframes vmFade { from { opacity: 0; } }
@keyframes vmPop { from { opacity: 0; transform: translateY(30px) scale(.94); } }
@keyframes vmRise { from { transform: translateY(100%); } }
@media (max-width: 920px) {
  .vm-body .tl-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .vm-works-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vm { align-items: flex-end; padding: 0; }
  .vm-bg { background: rgba(74, 68, 61, .55); }
  .vm-sheet { max-height: 92vh; border-radius: 32px 32px 0 0; padding: 44px 20px 28px; animation: vmRise .4s ease; }
  .vm-bar { left: 20px; }
  .vm-body .tl-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .vm-body .tl-info h2.tl-name { font-size: 22px; }
  .vm-works-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vm-close { width: 46px; height: 46px; font-size: 24px; top: 8px; right: 16px; }
  /* 閉じるはメニューのボタンと同じ位置。後ろのボタンを隠す */
  body.vm-open .hd .btn-contact { visibility: hidden; }
}