/* Visual abstract popup for Recent Work */

.item-recent {
  position: relative;
}

.recent-note {
  margin-left: 1em;
  font-size: 0.95em;
  color: #555;
}

.summary-wrap {
  position: relative;
  display: inline-block;
  margin-left: 0.6em;
}

.summary-button {
  font-family: inherit;
  font-size: 0.88em;
  line-height: inherit;
  padding: 0;
  margin: 0;
  color: #666;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.summary-button:hover,
.summary-button:focus {
  color: #444;
  background: none;
  text-decoration: none;
}

.summary-button:focus-visible {
  outline: 1px solid #888;
  outline-offset: 2px;
}

.visual-abstract {
  display: none;
  position: absolute;
  z-index: 20;
  left: -200px;
  top: 1.9em;
  width: 660px;
  max-width: 92vw;
  padding: 0.6em;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  box-sizing: border-box;
}

.visual-abstract img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: #fff;
}

.visual-caption {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.6em;
  color: #555;
}

.visual-abstract-title {
  display: block;
  font-size: 0.98em;
  font-weight: bold;
  line-height: 1.35;
  color: #222;
  margin-bottom: 0.45em;
}

.visual-caption-title {
  display: block;
  font-size: 0.98em;
  font-weight: bold;
  line-height: 1.35;
  color: #222;
  margin-bottom: 0.45em;
}

.visual-caption-body {
  display: block;
  font-size: 0.9em;
  line-height: 1.5;
  color: #333;
}

.summary-wrap:hover .visual-abstract,
.summary-wrap:focus-within .visual-abstract {
  display: block;
}

@media screen and (max-width: 700px) {
  .visual-abstract {
    position: fixed;
    left: 5vw;
    right: 5vw;
    top: 12vh;
    width: auto;
    max-height: 76vh;
    overflow: auto;
  }

  .visual-abstract img {
    height: 220px;
  }
}

/* ==========================================================================
   Recent Work ポップアップ用ダークモード設定
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .visual-abstract {
    background: #222;        /* ポップアップの背景を濃いグレーに */
    border-color: #444;      /* 枠線を少し暗く */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); /* 影を深くして引き締める */
  }

  .visual-abstract img {
    background: #fff;        /* 画像の台紙を白に固定してプロットの正確性を守る */
    border-radius: 4px;      /* 角をわずかに丸めて、ベタッと感をなくしカード風に */
    filter: brightness(0.80) contrast(1.05); /* 色味を変えずに、暗い部屋での「眩しさ」だけを20%カット */
  }

  .summary-button {
    color: #bbb;             /* [summary] [概要] の文字色を少し明るく */
  }

  .summary-button:hover,
  .summary-button:focus {
    color: #eee;             /* ホバー時は白く光らせる */
  }

  .visual-caption {
    color: #aaa;
  }

  .visual-caption-title {
    color: #fff;             /* 論文タイトルを純白に */
  }

  .visual-caption-body {
    color: #ccc;             /* 解説文を読みやすいライトグレーに */
  }
}