/* ============================================================
   講師ページ「この講師もおすすめ」追従UI（instructor-recommend.php）
   SP : 既存の追従バー（.np-follow-sp）の真上に細い帯 → タップでボトムシート
   PC : 画面左下のボタン（右下は .np-follow-pc）→ クリックでパネル
   ※ html{font-size:62.5%} 前提（1rem = 10px）
   ============================================================ */
.vt-reco {
  --vt-navy: #004096;
  --vt-pale: #e7eef7;
  --vt-line: #d6e0ee;
  --vt-accent: #0090d9;
  --vt-text: #222;
  --vt-sub: #444;
  --vt-bar-h: 7.2rem; /* .np-follow-sp の高さ（padding 1rem×2 + ボタン 5.2rem） */
  font-family: "Noto Sans JP", sans-serif;
}
.vt-reco [hidden] { display: none !important; }
.vt-reco p { margin: 0; }

/* ---- 起動ボタン（SP=帯 / PC=左下ボタン） ---- */
.vt-reco-launcher {
  position: fixed;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--vt-navy);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, box-shadow .2s ease;
}
.vt-reco.is-visible .vt-reco-launcher {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.vt-reco-avatars { display: flex; flex-shrink: 0; }
.vt-reco-avatars img {
  display: block;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 2px solid var(--vt-navy);
  background: #fff;
  object-fit: cover;
  box-sizing: border-box;
}
.vt-reco-avatars img + img { margin-left: -.8rem; }
.vt-reco-launcher-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vt-reco-eyebrow {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.3;
  color: var(--vt-accent);
}
.vt-reco-launcher-main {
  max-width: 100%;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vt-reco-launcher-names { font-weight: 400; color: var(--vt-sub); }
.vt-reco-chevron { flex-shrink: 0; width: 1.8rem; height: 1.8rem; }

/* ---- 背景・パネル共通 ---- */
.vt-reco-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  opacity: 0;
  transition: opacity .25s ease;
}
.vt-reco.is-open .vt-reco-overlay { opacity: 1; }
.vt-reco-panel {
  position: fixed;
  z-index: 2147483200;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  background: #fff;
  color: var(--vt-text);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.vt-reco.is-open .vt-reco-panel { opacity: 1; transform: none; }
.vt-reco-handle {
  align-self: center;
  width: 4rem;
  height: .4rem;
  border-radius: .2rem;
  background: #d0d0d0;
}
.vt-reco-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.vt-reco-title { margin-top: .4rem !important; font-size: 1.7rem; font-weight: 700; line-height: 1.5; color: var(--vt-text); }
.vt-reco-sub { margin-top: .2rem !important; font-size: 1.2rem; color: #666; }
.vt-reco-close {
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #e9e9e9;
  cursor: pointer;
}

/* ---- 講師カード ---- */
.vt-reco-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.vt-reco-card {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem 1.2rem;
  padding: 1.4rem;
  border: 1px solid var(--vt-line);
  border-radius: .8rem;
}
.vt-reco-card-img {
  display: block;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 50%;
  border: 2px solid var(--vt-navy);
  object-fit: cover;
  box-sizing: border-box;
}
.vt-reco-card-name { font-size: 1.6rem; font-weight: 700; line-height: 1.4; color: var(--vt-text); }
.vt-reco-card-meta { margin-top: .2rem !important; font-size: 1.2rem; color: var(--vt-sub); }
.vt-reco-card-meta b { color: var(--vt-navy); }
.vt-reco-card-body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .8rem; }
.vt-reco-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.vt-reco-tags li { font-size: 1.1rem; line-height: 1.5; padding: .3rem .8rem; background: var(--vt-pale); color: var(--vt-navy); }
.vt-reco-tags li:first-child { background: var(--vt-navy); color: #fff; font-weight: 700; }
.vt-reco-reason { font-size: 1.3rem; line-height: 1.7; color: var(--vt-sub); }
.vt-reco-actions { display: flex; gap: .8rem; }
.vt-reco-btn {
  flex: 1 1 0;
  min-height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1.5px solid var(--vt-navy);
  border-radius: .6rem;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
}
.vt-reco-btn--ghost { background: #fff; color: var(--vt-navy); }
.vt-reco-btn--solid { background: var(--vt-navy); color: #fff; }

/* ---- SP（639px以下） ---- */
@media screen and (max-width: 639px) {
  .vt-reco-launcher {
    left: 0;
    right: 0;
    bottom: var(--vt-bar-h);
    width: 100%;
    height: 5.8rem;
    padding: 0 1.6rem;
    gap: 1.2rem;
    background: var(--vt-pale);
    border-top: 1px solid var(--vt-line);
  }
  .vt-reco-launcher .vt-reco-avatars img { width: 3.6rem; height: 3.6rem; }
  .vt-reco-launcher .vt-reco-avatars img + img { margin-left: -1rem; }
  .vt-reco-launcher-main { font-size: 1.4rem; }
  .vt-reco-chevron { width: 2rem; height: 2rem; }
  .vt-reco-overlay { background: rgba(0, 0, 0, .55); }
  .vt-reco-panel {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    padding: 1rem 1.6rem calc(2.4rem + env(safe-area-inset-bottom));
    border-radius: 1.4rem 1.4rem 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
    transform: translateY(100%);
  }
  html.vt-reco-lock { overflow: hidden; }
}

/* ---- PC（640px以上） ---- */
@media screen and (min-width: 640px) {
  .vt-reco-launcher {
    left: 2rem;
    bottom: 2rem;
    height: 6rem;
    padding: 0 2rem 0 1rem;
    background: #fff;
    border: 1px solid var(--vt-line);
    border-radius: 3rem;
    box-shadow: 0 6px 20px rgba(0, 40, 100, .18);
  }
  .vt-reco.is-visible .vt-reco-launcher:hover { box-shadow: 0 8px 24px rgba(0, 40, 100, .26); }
  .vt-reco.is-open .vt-reco-launcher { opacity: 0; visibility: hidden; }
  .vt-reco-avatars img { width: 4rem; height: 4rem; }
  .vt-reco-avatars img + img { margin-left: -1rem; }
  .vt-reco-launcher-main { font-size: 1.4rem; }
  .vt-reco-overlay { background: transparent; }
  .vt-reco-panel {
    left: 2rem;
    bottom: 2rem;
    width: 40rem;
    max-height: calc(100vh - 4rem);
    padding: 2rem;
    border: 1px solid var(--vt-line);
    border-radius: 1.2rem;
    box-shadow: 0 12px 36px rgba(0, 40, 100, .22);
    transform: translateY(1rem);
  }
  .vt-reco-handle { display: none; }
  .vt-reco-title { font-size: 1.6rem; }
  .vt-reco-close { width: 3.6rem; height: 3.6rem; }
  .vt-reco-card { grid-template-columns: 5.6rem minmax(0, 1fr); align-items: start; gap: .6rem 1.4rem; }
  .vt-reco-card-img { width: 5.6rem; height: 5.6rem; grid-row: 1 / span 2; }
  .vt-reco-card-body { grid-column: 2; }
  .vt-reco-card-name { font-size: 1.5rem; }
  .vt-reco-card-meta { font-size: 1.1rem; color: #808080; }
  .vt-reco-reason { font-size: 1.2rem; }
  /* ボタンはSP版と同じ（枠線ボタン＋塗りボタン）。PCはホバー時のみ変化 */
  .vt-reco-btn { min-height: 4rem; transition: opacity .2s ease; }
  .vt-reco-btn:hover { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .vt-reco-launcher, .vt-reco-overlay, .vt-reco-panel { transition: none; }
}