.training-layout {
  display: flex;
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 20px;
  gap: 96px;
  width: 80%;
}

.training-sidebar {
  flex: 0 0 27%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.training-sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 32px;
  position: static;
}

.training-sidebar-head h1 {
  font-size: var(--font-size-40);
  word-break: var(--wb-keep-all);
}

.training-sidebar-head p {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  color: var(--color-light-gray);
  margin-bottom: 20px;
}

.training-sidebar-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.download-banner .button,
.kakao-banner .button {
  display: flex;
  width: auto;
  background: #f2f2f2;
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-400);
  color: var(--color-light-gray);
  text-decoration: none;
  justify-content: flex-start;
  padding: 16px 24px;
  gap: 8px;
  border-radius: 200px;
  align-items: center;
  transition: background 0.2s ease;
}

.download-banner .button:hover,
.kakao-banner .button:hover {
  background: #e0e0e0;
  color: var(--color-black);
  font-weight: var(--font-weight-400);
}

.download-banner .button .icon {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' stroke='%23666666' stroke-width='1' d='M64 480l48 0 0 32-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L220.1 0c12.7 0 24.9 5.1 33.9 14.1L369.9 129.9c9 9 14.1 21.2 14.1 33.9L384 304l-32 0 0-112-112 0c-26.5 0-48-21.5-48-48l0-112L64 32C46.3 32 32 46.3 32 64l0 384c0 17.7 14.3 32 32 32zM351.5 160c-.7-2.8-2.1-5.4-4.2-7.4L231.4 36.7c-2.1-2.1-4.6-3.5-7.4-4.2L224 144c0 8.8 7.2 16 16 16l111.5 0zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z'/%3e%3c/svg%3e");
}

.kakao-banner .button .icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23666666' stroke='%23666666' stroke-width='1' d='M256 64C125.8 64 32 148.6 32 240c0 37.1 15.5 70.6 40 100c5.2 6.3 8.4 14.8 7.4 23.9c-3.1 27-11.4 52.5-25.7 76.3c-.5 .9-1.1 1.8-1.6 2.6c11.1-2.9 22.2-7 32.7-11.5L91.2 446l-6.4-14.7c17-7.4 33-16.7 48.4-27.4c8.5-5.9 19.4-7.5 29.2-4.2C193 410.1 224.1 416 256 416c130.2 0 224-84.6 224-176s-93.8-176-224-176zM0 240C0 125.2 114.5 32 256 32s256 93.2 256 208s-114.5 208-256 208c-36 0-70.5-6.7-103.8-17.9c-.2-.1-.5 0-.7 .1c-16.9 11.7-34.7 22.1-53.9 30.5C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.8s-1.1-12.8 3.4-17.4c8.1-8.2 15.2-18.2 21.7-29c11.7-19.6 18.7-40.6 21.3-63.1c0 0-.1-.1-.1-.2C19.6 327.1 0 286.6 0 240z'/%3e%3c/svg%3e");
}

.training-fixed-clone {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 16px 20px 32px 20px;
  transition: transform 0.3s ease;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.training-fixed-clone.hidden {
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
}

.training-fixed-clone.visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  background-color: rgba(255, 255, 255, 0.9);
}

.training-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.training-content p {
  width: 100%;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  color: var(--color-light-gray);
  line-height: var(--line-height-175);
  word-break: var(--wb-keep-all);
  background: #fafafa;
  padding: 20px 20px;
  box-sizing: border-box;
  border-radius: 8px;
}

.training-main #pdf-viewer {
  padding: 40px 0 0 0;
}

canvas {
  box-shadow: unset !important;
}

@media screen and (min-width: 961px) {
  .training-sidebar {
    position: sticky;
    top: 100px;
  }
}

@media screen and (max-width: 960px) {
  .training-layout {
    flex-direction: column;
    width: 90%;
  }
  .download-banner .button,
  .kakao-banner .button {
    justify-content: center;
  }
  .training-content p {
    width: 100%;
  }
  canvas {
    width: 100%;
  }
  .training-fixed-clone .download-banner,
  .training-fixed-clone .kakao-banner {
    flex: 0 0 50%;
  }
  .training-fixed-clone .download-banner .button,
  .training-fixed-clone .kakao-banner .button {
    font-size: var(--font-size-14);
  }
}