/* =========================================================================
   포트폴리오 상세(/projects/*) 능동 개입 위젯
   - m-CHAT 타이핑 개입 (80% 스크롤 이후 3초 간격) — 텍스트만 변경(테두리/링 없음)
   - footer 우측 추천 썸네일 1개: 100px 노출 → hover 시 160px(ease) 확장,
     프로젝트명은 이미지 하단 20px 아래 왼쪽 정렬(오버레이/그림자 없음)
   JS: /js/musign/portfolio-engage.js  데이터: /js/musign/portfolio-reco-data.js
   ========================================================================= */

/* 추천 레일 — footer 우측 가장자리, 세로 중앙. 움직임/그림자 없음 */
.reco-rail {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 490px;
  display: flex;
  align-items: center;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s ease;
}
.reco-rail.on { opacity: 1; }

.reco-thumb {
  position: relative;
  width: 100px;                  /* 평소 노출 폭 */
  height: 490px;                 /* 현재(243px)의 2배 */
  display: block;
  text-decoration: none;
  pointer-events: auto;
  background-color: #15151b;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: width .45s ease;   /* 자연스러운 ease 확장 */
  will-change: width;
}
.reco-thumb:hover { width: 160px; }   /* 100 → 160px 만 살짝 확장 */

/* 프로젝트명 — 이미지 하단 20px 아래, 왼쪽 정렬. 오버레이/그림자 없음. hover 시 노출 */
.reco-thumb .rt-name {
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  text-align: left;
  white-space: nowrap;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  opacity: 0;
  transition: opacity .3s ease .08s;
}
.reco-thumb:hover .rt-name { opacity: 1; }

@media (max-width: 1024px) {
  .reco-rail, .reco-thumb { height: 400px; }
}
@media (max-width: 767px) {
  .reco-rail { display: none; }   /* 모바일은 챗봇 개입만 */
}