/* 공통 */
*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Pretendard","Noto Sans KR", sans-serif;
  background: #ececec;
  color: #fff;
  overflow: hidden;
  transition: background 1s ease;
}

/* (1) 닫기 버튼 */
.close-btn{
  position:fixed; top:14px; left:14px; z-index:80;
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(0,0,0,.55);
  text-decoration:none; color:#fff; font-size:26px; line-height:1;
}

/* (2) 좌하단 메뉴바 (검정 반투명 + 미세한 그라데이션 애니메이션) */
.side-nav{ position:fixed; left:8px; bottom:8px; z-index:70; }
.side-nav ul{
  list-style:none; margin:0; padding:0; width:186px;
  background: linear-gradient(45deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08)),
              rgba(0,0,0,.55);
  background-size:300% 300%, auto;
  animation: sheen 8s linear infinite;
  border-top-right-radius:12px;
  overflow:hidden;
}
.side-nav li + li{ border-top:1px solid rgba(255,255,255,.15); }
.side-nav a{
  display:block; padding:13px 16px; color:#fff; text-decoration:none; font-weight:700;
}
.side-nav a:hover{ background:rgba(255,255,255,.14); }
@keyframes sheen{
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}

/* (3) 설명 박스 : 예제 비율에 맞춰 큼직하게, 우하단 고정 */
.desc-card{
  position:fixed; right:-15px; bottom:-15px; z-index:20;
  width:min(80vw, 1980px);
  height:min(60vh, 1800px);
  padding:40px 60px;
  background:rgba(0,0,0,.30);
  /* mix-blend-mode: multiply; ← ✖ 이 줄 삭제 또는 주석 처리 */
  border-radius:22px;
  box-shadow:0 18px 32px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.22);
  display:flex; flex-direction:column; justify-content:flex-start;
}
.desc-card h1{
  margin:0 0 10px; font-weight:900;
  font-size:clamp(28px, 3.6vw, 44px);  /* 예제처럼 굵고 큼 */
  letter-spacing:.3px;
}
.divider{
  width:80%; height:2px; background:rgba(255,255,255,.85);
  margin:6px 0 18px;
}
.desc-card p{
  margin:0; 
  width:calc(150% - 100%);
  font-size:clamp(14px, 1.15vw, 18px); 
  line-height:1.9;
  color:#e9e9e9;
}

/* (4) 작품 이미지 : 설명박스 상단에 '겹쳐' 오른쪽으로 튀어나오게 */
.art-stage {
  position: fixed;
  z-index: 40;                     /* 설명박스 위 */
  left: 77%;                       /* 가로 중앙 */
  top: 50%;                        /* 세로 중앙 */
  transform: translate(-50%, -50%);/* 정확히 중앙 정렬 */
  width: min(30vw, 1000px);        /* 예제 비율 유지 */
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.3));
  pointer-events: none;            /* 클릭 방해 X */
}

.art-stage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* (5)(6) 페이저 */
.pager{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:24px; display:flex; gap:12px; z-index:60;
}
.pill{
  border:0; padding:10px 18px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; font-weight:800; letter-spacing:.4px;
}

/* 반응형 보정: 작은 화면에서 비율 유지 */
@media (max-width: 1100px){
  .desc-card{ right:36px; bottom:36px; width: min(64vw, 880px); }
  .art-stage{ right:56px; bottom: calc(36px + 220px); width: min(32vw, 380px); }
}
@media (max-width: 760px){
  .art-stage{ left:50%; transform:translateX(-50%); top:16px; bottom:auto; width:84vw; }
  .desc-card{ left:12px; right:12px; width:auto; height:auto; min-height:32vh; }
  .divider{ width:100%; }
  .desc-card p{ max-width:100%; }
}