/* Reference: ktcloud-techup.co.kr shared learning-space section. */
.course-learning-spaces {
  --place-background: #000;
  width: 100%;
  max-width: 1008px;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  color: #f5f4f7;
  background: var(--place-background);
  scroll-margin-top: 160px;
}
.course-learning-spaces, .course-learning-spaces * { box-sizing: border-box; }
.course-learning-spaces * { color: inherit; font-family: techupSans, Arial, sans-serif; }
.course-learning-spaces > h2 { margin: 0 0 58px; color: #f5f4f7; font-size: 32px !important; font-weight: 700; line-height: 1.5; letter-spacing: -.4px; text-align: left; }
.course-learning-spaces .place-gallery { display: flex; position: relative; width: 100%; min-width: 0; overflow: hidden; }
.course-learning-spaces .place-gallery-motion { display: flex; width: max-content; flex: 0 0 auto; animation: course-place-roll 60s linear infinite; will-change: transform; }
.course-learning-spaces .place-gallery-track { display: flex; flex: 0 0 auto; gap: 24px; padding-right: 24px; }
.course-learning-spaces .place-gallery-slide { flex: 0 0 auto; width: auto; height: 192px; aspect-ratio: 16 / 9; overflow: hidden; }
.course-learning-spaces .place-gallery-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.course-learning-spaces .place-gallery-fade { position: absolute; inset-block: 0; width: 100px; z-index: 1; pointer-events: none; }
.course-learning-spaces .place-gallery-fade.left { left: 0; background: linear-gradient(90deg,var(--place-background),transparent); }
.course-learning-spaces .place-gallery-fade.right { right: 0; background: linear-gradient(270deg,var(--place-background),transparent); }
.course-learning-spaces .place-gallery:focus-visible { outline: 2px solid #80b5ff; outline-offset: 4px; }
.course-learning-spaces .place-gallery:hover .place-gallery-motion,
.course-learning-spaces .place-gallery:focus-within .place-gallery-motion,
.course-learning-spaces.is-offscreen .place-gallery-motion,
.course-learning-spaces.is-page-hidden .place-gallery-motion { animation-play-state: paused; }
.course-learning-spaces .place-copy { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 20px; }
.course-learning-spaces .place-copy article { min-width: 0; margin: 0; padding: 28px; border: 1px solid #2c2e35; background: #1a1d22; }
.course-learning-spaces .place-copy h3 { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 15px; color: #f5f4f7; font-size: 20px !important; font-weight: 700; line-height: 1.5; letter-spacing: -.2px; text-align: left !important; }
.course-learning-spaces .place-copy h3 a { flex: 0 0 auto; color: #ff6370; font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.course-learning-spaces .place-copy h3 a:hover { color: #ff8d96; text-decoration: none; }
.course-learning-spaces .place-copy h3 a:focus-visible { outline: 2px solid #ff8d96; outline-offset: 4px; }
.course-learning-spaces .place-copy p { margin: 0; color: #aba9b3; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -.1px; text-align: left; overflow-wrap: anywhere; }
@keyframes course-place-roll { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .course-learning-spaces .place-copy { grid-template-columns: 1fr; }
  .course-learning-spaces .place-gallery-fade { width: 60px; }
}
@media (max-width: 700px) {
  .course-learning-spaces > h2 { margin-bottom: 38px; font-size: 24px !important; line-height: 1.5; }
  .course-learning-spaces .place-gallery-track { gap: 16px; padding-right: 16px; }
  .course-learning-spaces .place-gallery-slide { height: 160px; }
  .course-learning-spaces .place-gallery-fade { width: 40px; }
  .course-learning-spaces .place-copy { gap: 16px; }
  .course-learning-spaces .place-copy article { padding: 22px; }
  .course-learning-spaces .place-copy h3 { font-size: 18px !important; line-height: 26px; letter-spacing: -.1px; }
  .course-learning-spaces .place-copy p { font-size: 14px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
  .course-learning-spaces .place-gallery { overflow-x: auto; scroll-snap-type: x proximity; }
  .course-learning-spaces .place-gallery-motion { animation: none; will-change: auto; }
  .course-learning-spaces .place-gallery-slide { scroll-snap-align: center; }
  .course-learning-spaces .place-gallery-track.clone,
  .course-learning-spaces .place-gallery-fade { display: none; }
}