/** Home */
.work-items {
  display: flex;
  gap: 1rem;
}

.work-item {
  width: 200px;
  height: 200px;
  background-color: inherit;
  border: 2px solid purple;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-item:hover {
  background-color: purple;
  color: white;
}

.test {
  font-weight: 900;
  font-size: 2rem;
}

/* Webbook */
:root {
  --book-width: 800px;
  --book-height: 600px;
}

#webbook {
  touch-action: none;
}

#webbook .section {
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c209e;
  perspective: 3000px;
}

.book {
  position: relative;
  width: var(--book-width);
  height: var(--book-height);
  transform-style: preserve-3d;
  transform: rotateX(20deg);
  transform-origin: center center;
}

@media screen and (max-width: 900px) {
  #webbook .section {
    perspective: 5000px;
  }

  .book {
    transform: rotateX(20deg) scale(0.8);
  }
}

@media screen and (max-width: 700px) {
  #webbook .section {
    perspective: 7000px;
  }

  .book {
    transform: rotateX(20deg) scale(0.6);
  }
}

@media screen and (max-width: 500px) {
  #webbook .section {
    perspective: none;
  }

  .book {
    transform: rotateX(30deg) scale(0.4);
  }
}

.leaf {
  position: absolute;
  left: calc(var(--book-width) / 2);
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 2s ease-out;
  cursor: pointer;
  transform: rotateY(0deg);
  transform-origin: left;
}

.leaf.flipped {
  transform: rotateY(-180deg);
  transform-origin: left;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  font-family: 'Gothic A1', serif;

  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  backface-visibility: hidden;
}

.page.front {
  left: 0;
  background: linear-gradient(90deg, #555, #aaa 3%, #fff);
}

.page.back {
  left: 0;
  transform: rotateY(180deg);
  background: linear-gradient(270deg, #555, #aaa 3%, #fff);
}

.page-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow: hidden;
  user-select: none;
}

.page.front .page-content {
  padding: 1rem 1rem 1rem 1.75rem;
}

.page.back .page-content {
  padding: 1rem 1.75rem 1rem 1rem;
}

.page-content.image {
  justify-content: center;
  align-items: center;
}

.page.front .page-content.image {
  padding: 4rem;
}

.page.back .page-content.image {
  padding: 4rem;
}

.page-content.overflow {
  overflow-y: auto;
}

.page-content .en {
  position: relative;
  font-size: 1.25rem;
  top: 0.05rem;
}

.page-content a {
  color: blue;
  text-decoration: underline;
}

/* .page-content img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 100%;
} */

.page-content h1 {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
}

.page-content p {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
}

/* Handbook */
#handbook {
  overflow-y: scroll;
  background-color: black;
}

#handbook .section {
  align-items: center;
  width: 100%;
  overflow-x: hidden;
}

#handbook .wrapper {
  width: 80%;
  padding: 5rem 2rem 5rem 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#handbook .page-image {
  width: 100%;
  object-fit: contain;
  filter: contrast(120%) brightness(100%);
}

/* First image - centered in viewport */
#handbook .wrapper:nth-child(2) {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
  padding: 0;
}

#handbook .wrapper:nth-child(2) .page-image {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

#handbook .hand-left, #handbook .hand-right {
  position: absolute;
  width: 35%;
  filter: contrast(130%) brightness(80%) sepia(40%) opacity(0.2);
  transition: filter 0.3s ease-in-out;
  cursor: pointer;
  /* filter: invert(0) grayscale(100%); */
}

#handbook .hand-left:hover, #handbook .hand-right:hover {
  filter: contrast(130%) brightness(80%) sepia(40%) opacity(1);
}

#handbook .hand-left {
  left: -25px;
}

#handbook .hand-right {
  right: -25px;
}

#handbook .center-text {
  position: fixed;
  width: 75%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 4rem 2rem;
  border-radius: 50%;
  
  background: linear-gradient(180deg, transparent, 20%, black, 80%, transparent);
  color: white;

  font-family: 'ChosunGu', sans-serif;
  font-weight: 400;
  font-size: 2rem;

  text-align: center;
  line-height: 1.5;

  z-index: 1000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

#handbook .center-text.hidden {
  opacity: 0;
}

/* Fine-tune spacing for Korean punctuation */
.center-text .punctuation-left {
  /* margin-left: -0.5em; */
}

.center-text .punctuation-right {
  /* margin-right: -0.5em; */
}

#wrapper-18 .hand-right,
#wrapper-19 .hand-right,
#wrapper-20 .hand-right, 
#wrapper-21 .hand-right {
  right: -75px;
}

@media screen and (max-width: 600px) {
  #handbook .wrapper {
    width: 100%;
    padding: 5rem 1rem 5rem 0;
  }

  #wrapper-18 .hand-right,
  #wrapper-19 .hand-right,
  #wrapper-20 .hand-right, 
  #wrapper-21 .hand-right {
    right: -25px;
  }

  #handbook .center-text {
    width: 90%;
    font-size: 1.2rem;
  }
}