:root{
  --rows: 8;
  --cellH: calc(100dvh / var(--rows));

  /* hover 시 튀어나오기 양 */
  --pop: 25%;

  /* 선택 썸네일 옆 텍스트 박스 폭 (썸네일 너비의 3배 정도) */
  --noteW: 240%;

  /* 포스터 */
  --posterH: 80dvh;
  --posterAR: 220 / 311;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  background: var(--pageBg, #ffffff);
  overflow: hidden;
  font-family: "Gothic A1", sans-serif;
  font-weight: 900;
  transition: background 260ms ease;
}

/* 3컬럼 레이아웃 */
.page{
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--cellH) 1fr var(--cellH);
}

/* 좌/우 레일 */
.rail{
  height: 100%;
  display: grid;
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: 0;
  padding: 0;
  margin: 0;
}

.thumb{
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;

  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  outline: none;
  cursor: pointer;

  /* ✅ hover pop-out 모션은 thumb 자체 이동 */
  transform: translateX(0);
  transition: transform 200ms ease;
  position: relative; /* note 붙일 기준 */
  z-index: 1;
}

/* 이미지: 안 잘림 */
.thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ✅ hover일 때만 pop-out */
.rail-left .thumb.is-pop{
  transform: translateX(var(--pop));
}
.rail-right .thumb.is-pop{
  transform: translateX(calc(var(--pop) * -1));
}

/* ✅ Guide는 hover해도 pop-out 금지 */
.thumb.is-guide.is-pop{
  transform: translateX(0) !important;
}

/* 가운데 포스터 */
.center{
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
}

.posterWrap{
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.posterStack{
  position: relative;
  height: var(--posterH);
  aspect-ratio: var(--posterAR);
  width: auto;
}

.poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  box-shadow: 8px 10px 12px rgba(0,0,0,.18);
}

.poster--top{
  opacity: 1;
  transition: opacity 180ms ease;
}
.poster--top.is-hidden{ opacity: 0; }

.posterWrap:hover .poster{
  box-shadow: none;
}

.posterCaption{
  width: min(520px);
  display: grid;
  justify-items: center;
}

.posterTitle{
  width: 100%;
  border: 0;
  background: transparent;
  color: #111;
  font-weight: 800;
  text-align: center;
  padding: 8px 0;
  font-size: 18px;
 
  outline: none;
}
.posterTitle:focus{ outline: none; }

/* ✅ 선택된 썸네일 옆 텍스트 박스 */
.thumbNote{
  position: absolute;
  top: 0;
  width: var(--noteW);

  font-size: 14pt;
  line-height: 1.6;
  text-align: left;
 letter-spacing: -0.03em;
  word-break: keep-all;
  overflow-wrap: break-word;

  padding: 4px 10px;
  background: #D4FD8E;
  color: #111;

  pointer-events: none; /* 클릭 방해 X */
}

/* 왼쪽 레일: 썸네일 오른쪽 상단에 딱 붙게 */
.rail-left .thumbNote{
  left: 100%;
}

/* 오른쪽 레일: 썸네일 왼쪽 상단에 딱 붙게 */
.rail-right .thumbNote{
  right: 100%;
}

input, button{
  font-family: "Gothic A1", sans-serif;
  font-weight: 600;
}

.posterTitle.is-light{
  color: #ffffff;
}