/* common.css 덮어쓰기*/
#reply_layer {
   height: 100vh;
}
@media all and (min-width: 720px) {
   #reply_layer {
      height: 80vh;
   }
}

/*  */
html {
   width: 100%;
   height: auto;
}
body {
   position: relative;
   font-family: "Noto Sans KR", sans-serif;
   width: 100%;
   word-break: break-word;
   overflow-x: hidden;
   background: #000;
   color: white;
}

.scene {
   margin-top: 70px;
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
}
.scene .chapterContainer {
   margin-bottom: 0px;
}
.scene #alignment {
   padding-top: 80px;
   background: linear-gradient(
      180deg,
      rgba(8, 8, 8, 1) 85%,
      rgba(0, 0, 0, 1) 100%
   );
}
.scene #alignment .descWrapper {
   position: relative;
   margin: 0 auto;
   width: 100%;
   max-width: 36.75rem;
   padding-top: 1.5rem;
   padding-bottom: 5rem;
   box-sizing: border-box;
}

.scene #alignment .descWrapper.noPaddingBottom {
   padding-bottom: 0;
}

.scene #alignment .descWrapper .desc {
   width: 100%;
   margin-bottom: 2rem;
   color: white;
   font-size: 1rem;
   line-height: 1.75rem;
}
.scene #alignment .descWrapper .desc:last-child {
   margin-bottom: 0rem;
}
.scene #alignment .imageWrapper {
   margin: 0 auto;
   width: 100%;
   max-width: 36.75rem;
}
.scene #alignment .imageWrapper figure {
   width: 100%;
   padding: 0;
   margin: 0;
}
.scene #alignment .imageWrapper figure.compare {
   position: relative;
   width: 100%;
}
.scene #alignment .imageWrapper figure.compare div {
   position: relative;
   width: 100%;
   overflow: hidden;
}
.scene #alignment .imageWrapper figure.compare div.prev {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
   border-right: 1px solid #ffffffaa;
}
.scene #alignment .imageWrapper figure.compare div.prev::before {
   position: absolute;
   bottom: 0;
   left: 0;
   content: "이전";
   padding: 1rem;
   box-sizing: border-box;
   font-size: 1rem;
   word-break: keep-all;
}
.scene #alignment .imageWrapper figure.compare div.next::before {
   position: absolute;
   bottom: 0;
   right: 0;
   content: "이후";
   padding: 1rem;
   box-sizing: border-box;
   font-size: 1rem;
}
.scene #alignment .imageWrapper figure.compare .slider {
   position: absolute;
   z-index: 9;
   cursor: ew-resize;
   width: 30px;
   height: 30px;
   background-color: transparent;
   background: center / cover no-repeat url("https://image.donga.com/policy/original/jameswebb/dist/images/question03/slider.svg");
   border-radius: 50%;
   z-index: 9999;
}
.scene #alignment .imageWrapper img {
   width: 100%;
   height: auto;
}
.scene #alignment .imageWrapper figcaption {
   opacity: 0.4;
   margin-top: 8px;
   text-align: center;
}
.scene #alignment .imageWrapper video {
   width: 100%;
   height: auto;
}

.scene .desc .highlight {
   font-weight: bold;
   color: #00e1ef;
}
/***** 부품 설명 ********/
#parts {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   margin-top: 3rem;
}
#parts .canvas-parent {
   position: sticky;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;

   z-index: -1;
   opacity: 1;
   pointer-events: all;
   transition: opacity 1s;
   overflow: hidden;
}
#parts .canvas-parent canvas {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   transition: opacity 1s;
}
#parts .scroller {
   top: 0;
   width: 100vw;
   z-index: 2;
}

#parts .descRoot {
   visibility: hidden;
   position: absolute;
   top: 0;
   width: 100%;
}
#parts .descRoot .descContainer {
   position: relative;
   width: 100vw;
}
#parts .descRoot .descContainer .desc {
   position: absolute;
   bottom: 0;
   width: 50%;
   max-width: 25rem;
   background-color: #000000cc;
   color: white;
   filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
      drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
   padding: 10px;
   z-index: 10;
}
#parts .descRoot .descContainer .center {
   left: 50%;
   transform: translate(-50%, 0%);
}
#parts .descRoot .descContainer .left {
   left: 5%;
   transform: translate(0, 0%);
}
#parts .descRoot .descContainer .right {
   right: 5%;
   transform: translate(0, 0%);
}
#parts .descRoot .descContainer .desc {
   font-size: 1rem;
   line-height: 1.75rem;
}
#parts .canvas-parent .stickyForeground {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   background-color: black;

   opacity: 1;
   color: white;
   font-size: 2rem;
}
#parts .canvas-parent .stickyForeground .content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

@media (max-width: 720px) {
   .scene .fixed img {
      width: 80%;
   }
   #parts .descRoot .descContainer .desc {
      width: 70%;
      max-width: 70%;
      padding: 0.75rem;
      border-radius: 0.5rem;
      box-sizing: border-box;
   }
   #parts .descRoot .descContainer .left {
      left: 50%;
      transform: translate(-50%, 0%);
   }
   #parts .descRoot .descContainer .right {
      left: 50%;
      transform: translate(-50%, 0%);
   }
   #parts .descRoot .descContainer .desc .title {
      font-size: 1rem;
      font-weight: bold;
      line-height: 1.4rem;
   }
   #parts .descRoot .descContainer .desc .content {
      font-size: 1rem;
      line-height: 1.4rem;
   }
}
@media (max-width: 480px) {
   .scene .descWrapper,
   .scene .imageWrapper {
      padding: 1.4rem;
      box-sizing: border-box;
   }
   .scene .fixed img {
      width: 95%;
   }
   #parts .descRoot .descContainer .desc {
      width: 90%;
      max-width: 90%;
      box-sizing: border-box;
   }
   .last-scene .descContainer .desc {
      max-width: 90%;
      box-sizing: border-box;
   }
}