.aa-demo-page { padding-top: calc(var(--aa-header-h) + clamp(48px, 7vw, 88px)); }
.aa-demo-page .aa-head { justify-items: center; }
.aa-demo-page__frame { overflow: hidden; margin-top: clamp(28px, 3.4vw, 48px); border: 1px solid var(--aa-line); border-radius: var(--aa-r-lg); background: var(--aa-white); box-shadow: 0 1px 2px rgba(27, 33, 64, .05), 0 24px 60px rgba(75, 63, 176, .14); }
.aa-demo-page__bar { display: flex; align-items: center; gap: 7px; height: 44px; padding-inline: 18px; border-bottom: 1px solid var(--aa-line-soft); background: var(--aa-surface); }
.aa-demo-page__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5DBEC; }
.aa-demo-page__bar span { margin-left: 10px; font-size: 13px; font-weight: 650; color: var(--aa-muted); }
.aa-demo-page__app { display: block; width: 100%; height: min(820px, calc(100svh - 160px)); min-height: 600px; border: 0; background: var(--aa-white); }
.aa-demo-page__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: clamp(28px, 3vw, 40px); }
.aa-demo-page__sub { font-size: 15px; font-weight: 700; color: var(--aa-primary-deep); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .aa-demo-page__frame { margin-inline: calc(var(--aa-gutter) * -.5); border-radius: var(--aa-r-md); }
  .aa-demo-page__bar { height: 38px; padding-inline: 14px; }
  .aa-demo-page__app { height: calc(100svh - 120px); min-height: 560px; }
}

@media (max-width: 760px) {
  .aa-kakao, .aa-totop { display: none; }
}