/* 사진을 넘기는 손짓과 실제 구성기 선택을 스크롤 한 축으로 재생한다. */
.place.is-stack { height: calc(100svh + 360svh * var(--home-scroll-pace, 1)); }
.place.is-stack .place__stage { position: sticky; top: 0; height: 100svh; min-height: 0; padding-block: 32px 64px; overflow: clip; }
.place.is-stack .place__viewport { overflow: visible; }
.place.is-stack .place__track { display: grid; gap: 0; transform: none; }
.place.is-stack .place__slide { grid-area: 1 / 1; position: relative; min-width: 0; pointer-events: none; }
.place.is-stack .place__slide.is-current { pointer-events: auto; }
.place.is-stack .place__layout { padding-block: 40px; }
.place.is-stack .place__photo { margin-inline: 24px; transform-origin: 50% 80%; }
.place.is-stack .place__picture, .place.is-stack .place__soon { aspect-ratio: 1.4; max-height: 49svh; }
.place.is-stack .place__picture img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.place.is-stack .place__copy { opacity: 0; }
.place.is-stack .case-controls { position: relative; z-index: 10; margin-top: 80px; }
.place.is-stack .case-selectors { gap: 32px; }
.place.is-stack .case-selectors button { min-height: 44px; padding-inline: 8px; }
.place.is-stack .case-selectors button[aria-pressed="true"] { color: var(--ink); }
.place.is-stack .case-selectors button:focus-visible { outline-color: currentColor; }

/* The main page exhibits each real site in a wide photographic frame. */
.place[data-case-gallery].is-stack { height: auto; }
.place[data-case-gallery].is-stack .place__pin { height: calc(100svh + 100svh * var(--case-count, 3) * var(--home-scroll-pace, 1)); }
.place[data-case-gallery] .place__stage { gap: clamp(20px, 2.7svh, 32px); padding-block: 56px; }
.place[data-case-gallery].is-stack .place__stage { padding-block: 32px 64px; }
.place[data-case-gallery] .place__header { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex: none; }
.place[data-case-gallery] .place__header h2 { font-size: 36px; line-height: 1.3; }
.place[data-case-gallery] .case-controls { position: relative; z-index: 2; flex: none; margin: 0; }
.place[data-case-gallery] .case-selectors { gap: clamp(20px, 2vw, 36px); }
.place[data-case-gallery] .case-selectors button { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 104px; min-height: 90px; padding: 4px 0 8px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: var(--text); line-height: 1.4; white-space: nowrap; transition: color 180ms ease, border-color 180ms ease; }
.place[data-case-gallery] .case-selectors button img { flex: none; width: 84px; height: 44px; object-fit: cover; opacity: .65; transition: opacity 180ms ease; }
.place[data-case-gallery] .case-selectors button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.place[data-case-gallery] .case-selectors button[aria-pressed="true"] img, .place[data-case-gallery] .case-selectors button:hover img { opacity: 1; }
.place[data-case-gallery] .case-selectors button:hover { color: var(--ink); }
.place[data-case-gallery] .place__viewport { overflow: hidden; }
.place[data-case-gallery] .place__layout { display: block; padding-block: 0; }
.place[data-case-gallery] .place__photo { margin: 0; padding: 0; color: inherit; background: transparent; box-shadow: none; transform: none; } /* taste-skill-ignore: the exhibition layout removes the former Polaroid shadow. */
.place[data-case-gallery] .place__picture { position: relative; height: clamp(300px, 51svh, 620px); max-height: none; aspect-ratio: auto; }
.place[data-case-gallery].is-stack .place__picture { height: var(--case-picture-height, clamp(300px, 51svh, 620px)); }
.place[data-case-gallery] .place__picture img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: var(--case-focus, 50% 50%); transform: none; }
.place[data-case-gallery] [data-case-key="knj"] .place__picture > img { filter: blur(3px); }
.place[data-case-gallery] .place__preview-cover { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff; background: rgb(38 62 48 / .56); font: 500 var(--subhead)/1.5 var(--body); pointer-events: none; }
.place[data-case-gallery] .place__image-note { position: absolute; z-index: 2; right: 16px; bottom: 14px; padding: 4px 8px; color: #fff; background: rgb(20 28 23 / .76); font: 400 14px/1.4 var(--body); pointer-events: none; }
.place[data-case-gallery] .place__copy { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 3vw, 48px); margin-top: 24px; }
.place[data-case-gallery].is-stack .place__slide:not(.is-current) .place__copy { visibility: hidden; }
.place[data-case-gallery] .place__identity h3 { font-size: var(--title); line-height: 1.35; white-space: nowrap; }
.place[data-case-gallery] .place__identity p { margin-top: 6px; color: var(--muted); font-size: var(--small); }
.place[data-case-gallery] .place__copy > p { margin: 0; font-size: 19px; line-height: 1.75; }
.place[data-case-gallery] .place__copy .text-link { justify-self: end; gap: 20px; min-height: 52px; margin: 0; white-space: nowrap; }
.place[data-case-gallery] [data-case-key="knj"] .place__copy .text-link { grid-column: 3; }
.place[data-case-gallery] .text-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.place[data-case-gallery] .text-link svg { transition: transform 180ms var(--out); }
.place[data-case-gallery] .text-link:hover svg { transform: translateX(5px); }
.place[data-case-gallery] .text-link:focus-visible { outline-color: currentColor; }

.invitation { position: relative; padding: 0; }
.invitation__stage { display: flex; align-items: center; min-height: 100svh; padding-block: 88px; }
.invitation[data-demo-return] { --demo-scroll-distance: 224svh; }
.invitation.is-pinned { height: calc(100svh + var(--demo-scroll-distance, 160svh) * var(--home-scroll-pace, 1)); }
.invitation.is-pinned .invitation__stage { position: sticky; top: 0; height: 100svh; min-height: 0; padding-block: 72px 104px; overflow: clip; }
.config-demo { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1440 / 645; background: var(--paper); }
.config-demo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.config-demo > img:first-child { opacity: 1; }
.config-demo__cursor { display: none; position: absolute; z-index: 4; top: 0; left: 0; width: calc(28px * var(--demo-cursor-scale, 1)); height: calc(36px * var(--demo-cursor-scale, 1)); color: var(--print-ink); pointer-events: none; transform-origin: 0 0; }
.invitation.is-pinned .config-demo__cursor { display: block; }
.config-demo__click { position: absolute; top: 0; left: 0; width: calc(34px * var(--demo-cursor-scale, 1)); height: calc(34px * var(--demo-cursor-scale, 1)); border: 2px solid var(--accent); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); }
.config-demo__cursor svg { position: relative; display: block; width: 100%; height: 100%; }
.config-demo__caption { align-items: baseline; }
.config-demo__caption [data-demo-label] { display: inline; margin-left: 12px; color: var(--ink); }
.config-demo__caption > span:last-child { flex: none; }

@media (min-width: 1024px) and (max-width: 1099px) {
  .place[data-case-gallery].is-stack .place__header { display: flex; }
  .place[data-case-gallery].is-stack .place__copy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 20px; }
  .place[data-case-gallery].is-stack .place__identity h3 { font-size: 26px; }
  .place[data-case-gallery].is-stack .place__copy > p { font-size: 16px; }
  .invitation.is-pinned .invitation__layout { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.6fr); gap: 24px; }
  .invitation.is-pinned .invitation__copy h2 { font-size: 28px; }
}
@media (min-width: 1024px) and (max-height: 719px) {
  .place[data-case-gallery].is-stack .place__stage { padding-block: 24px 88px; gap: 16px; }
  .place[data-case-gallery].is-stack .place__header h2 { font-size: 28px; }
  .place[data-case-gallery].is-stack .case-selectors button { min-height: 76px; gap: 4px; font-size: 15px; }
  .place[data-case-gallery].is-stack .case-selectors button img { height: 36px; }
  .place[data-case-gallery].is-stack .place__copy { margin-top: 16px; }
  .place[data-case-gallery].is-stack .place__identity h3 { font-size: 28px; }
  .place[data-case-gallery].is-stack .place__copy > p { font-size: 16px; }
  .invitation.is-pinned .invitation__stage { padding-block: 24px; }
  .invitation.is-pinned .invitation__copy h2 { font-size: clamp(26px, 5svh, 34px); }
  .invitation.is-pinned .invitation__copy > p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .place.is-stack, .invitation.is-pinned { height: auto; }
  .place.is-stack .place__stage, .invitation.is-pinned .invitation__stage { position: relative; height: auto; min-height: 100svh; }
  .config-demo__cursor { display: none; }
  .place[data-case-gallery] .case-selectors button, .place[data-case-gallery] .case-selectors button img, .place[data-case-gallery] .text-link svg { transition: none; }
}