.homeBanner {
  width: min(480px, calc(100vw - 32px));
  width: min(480px, calc(100vw - 32px), calc((100dvh - 32px) * .707));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  transition: width .25s ease;
}

.homeBanner[open] { animation: bannerAppear .35s ease-out both; }
.homeBanner.isClosing { animation: bannerDisappear .18s ease-in both; pointer-events: none; }
.homeBanner::backdrop { background: rgba(20, 30, 36, .24); animation: bannerDim .35s ease-out both; }
.homeBanner img { display: block; width: 100%; height: auto; }

.homeBannerClose {
  position: sticky;
  z-index: 1;
  top: 12px;
  float: right;
  width: 42px;
  height: 42px;
  margin: 12px 12px -54px 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #24322f;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
}

.homeBannerClose:focus-visible { outline: 3px solid #225d90; outline-offset: 2px; }

@keyframes bannerAppear {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes bannerDisappear {
  to { opacity: 0; transform: translateX(12px); }
}

@keyframes bannerDim {
  from { background: rgba(20, 30, 36, 0); }
  to { background: rgba(20, 30, 36, .24); }
}

@media (max-height: 430px) {
  .homeBanner { width: min(480px, calc(100vw - 32px)); }
}

/* 중앙 문구를 가리지 않고 오른쪽에 표시합니다. */
@media (min-width: 1180px) {
  .homeBanner {
    width: min(360px, calc(50vw - 356px));
    margin: auto 32px auto auto;
  }
  /* 열린 배너 아래의 바로가기 버튼은 누를 수 없으므로 잠시 감춥니다. */
  body:has(.homeBanner[open]) .quickDock { visibility: hidden; }
}

/* 마우스를 올린 동안에만 글씨를 읽기 쉬운 크기로 펼칩니다. */
@media (hover: hover) and (pointer: fine) and (min-width: 1180px) {
  .homeBanner:hover {
    width: min(520px, calc(100vw - 64px));
  }
}

@media (max-width: 1179px) {
  .homeBanner[open] { animation-name: bannerAppearMobile; }
  .homeBanner.isClosing { animation-name: bannerDisappearMobile; }
}

@keyframes bannerAppearMobile {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bannerDisappearMobile {
  to { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .homeBanner { transition: none; }
  .homeBanner[open], .homeBanner.isClosing, .homeBanner::backdrop { animation: none; }
}