html {
  scrollbar-gutter: stable;
}

.portfolio-shell {
  overflow-anchor: none;
}

.post-card .post-tools {
  position: static;
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 6px;
}

.portfolio-js [data-page-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .52s cubic-bezier(.22, 1, .36, 1) var(--page-reveal-delay, 0s),
              transform .52s cubic-bezier(.22, 1, .36, 1) var(--page-reveal-delay, 0s);
}

.portfolio-js [data-page-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.portfolio-js .post-card[data-page-reveal] {
  transition: opacity .52s cubic-bezier(.22, 1, .36, 1) var(--page-reveal-delay, 0s),
              transform .52s cubic-bezier(.22, 1, .36, 1) var(--page-reveal-delay, 0s),
              box-shadow .18s;
}

.portfolio-js .post-card[data-page-reveal].is-visible:hover {
  transform: translate3d(0, -3px, 0);
}

.post-card-thumbnail {
  position: relative;
  height: 124px;
  margin: -24px -24px 18px;
  overflow: hidden;
  background: #dedede;
}

.post-card-thumbnail::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(100deg, transparent 24%, rgba(255, 255, 255, .58) 45%, transparent 66%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}

.post-card-thumbnail.is-loading::before {
  opacity: 1;
  animation: thumbnail-shimmer 1.35s ease-in-out infinite;
}

.portfolio-js .post-card-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(.88) brightness(.92);
  transition: opacity .3s ease, filter .18s ease, transform .25s ease;
}

.portfolio-js .post-card-thumbnail.is-loaded img {
  opacity: 1;
}

.post-card-thumbnail.is-error {
  background: #d9d9d9;
}

@keyframes thumbnail-shimmer {
  to { transform: translateX(100%); }
}

.post-card:hover .post-card-thumbnail img {
  filter: saturate(1) brightness(1);
  transform: scale(1.025);
}

.post-card .post-tools img {
  display: block;
  width: 17px;
  height: 17px;
  object-fit: contain;
  opacity: .55;
}

.post-card .post-tools img[src$="/unity.png"],
.post-card .post-tools img[src$="/unreal.png"] {
  filter: brightness(0);
  opacity: .48;
}

.post-card-footer {
  align-items: flex-end;
}

.post-card-footer-left {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.post-card .post-card-title > img {
  width: 38px;
  height: 38px;
}

.post-card .post-card-title {
  min-height: 38px;
  margin-bottom: 10px;
}

.post-card .post-card-title h3 {
  margin: 0;
}

.post-card-genre {
  display: flex;
  margin: 0 0 10px;
  align-items: baseline;
  gap: 6px;
  color: #f5821f;
  font-size: 11px;
  font-weight: 600;
}

.post-card-genre span {
  color: #999;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
}

.post-card .post-card-title:not(:has(img)) {
  align-items: flex-start;
}

.post-document .post-title > img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.default-project-icon {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.post-card .post-card-title > .default-project-icon {
  width: 32px;
  height: 32px;
  margin: 3px;
}

.post-document .post-title > .default-project-icon {
  width: 34px;
  height: 34px;
  margin: 3px;
}

.post-content {
  font-size: 14px;
}

.gallery-loading-enabled .gallery-slide {
  position: relative;
  overflow: hidden;
}

.gallery-loading-enabled .gallery-slide::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .08) 47%, transparent 69%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}

.gallery-loading-enabled .gallery-slide.is-loading::before {
  opacity: 1;
  animation: gallery-image-shimmer 1.45s ease-in-out infinite;
}

.gallery-loading-enabled .gallery-slide img {
  opacity: 0;
  transition: opacity .32s ease;
}

.gallery-loading-enabled .gallery-slide.is-loaded img {
  opacity: 1;
}

.gallery-image-loader {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #aaa;
  font: 500 11px/1 "Noto Sans KR", sans-serif;
  pointer-events: none;
}

.gallery-loading-enabled .gallery-slide.is-loading .gallery-image-loader,
.gallery-loading-enabled .gallery-slide.is-error .gallery-image-loader {
  display: flex;
}

.gallery-image-loader i {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: #f5821f;
  border-radius: 50%;
  animation: gallery-image-spin .75s linear infinite;
  will-change: transform;
}

.gallery-image-loader em {
  font-style: normal;
}

.gallery-loading-enabled .gallery-slide.is-error .gallery-image-loader i {
  display: none;
}

@keyframes gallery-image-shimmer {
  to { transform: translateX(100%); }
}

@keyframes gallery-image-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .post-card-thumbnail.is-loading::before {
    animation: none;
  }

  .portfolio-js .post-card-thumbnail img {
    transition: none;
  }

  .gallery-loading-enabled .gallery-slide img {
    transition: none;
  }
}