/* index.html — 우측 키 비주얼 (animated GIF) */
.right {
  --intro-kv-inset-block: clamp(8px, 1.6vw, 18px);
  --intro-kv-inset-inline: clamp(10px, 2vw, 22px);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  padding-inline: var(--intro-kv-inset-inline);
  padding-bottom: var(--intro-kv-inset-block);
  padding-top: var(--intro-kv-inset-block);
  background: #000;
  color: #e8e8e8;
  overflow: hidden;
  box-sizing: border-box;
}

.intro-kv__frame {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.intro-kv__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

@media (max-width: 820px) {
  .right {
    min-height: min(48vh, 520px);
    height: auto;
  }

  /* 모바일: 캘리그라피만 좌우 여백 없이 뷰포트 전체 너비 */
  .right.intro-kv {
    flex: 0 0 auto;
    align-self: start;
    min-height: 0;
    height: auto;
    overflow-x: clip;
    overflow-y: visible;
    padding-inline: 0;
    padding-top: var(--intro-kv-inset-block);
    padding-bottom: var(--intro-kv-inset-block);
  }

  .right.intro-kv .intro-kv__frame {
    flex: 0 0 auto;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: auto;
    min-height: 0;
    overflow: visible;
    display: block;
    line-height: 0;
    background: #000;
  }

  .right.intro-kv .intro-kv__img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
  }

  .ti .shell.menu-collapsed-mobile > .right.intro-kv {
    padding-inline: 0;
    padding-top: calc(var(--ti-mobile-menu-bar-offset, 69px) + var(--intro-kv-inset-block));
  }
}