body:has(.demo-page){background:#14161a}.demo-page{--demo-bg:#14161a;--demo-surface:#141414;--demo-surface-soft:#1a1a1a;--demo-border:#2a2a2a;--demo-text:#fff;--demo-body:#f5f5f7;--demo-muted:#9b9ba3;--demo-dim:#75757d;--demo-radius-card:14px;--demo-pad-x:20px;--demo-max:720px;--demo-header-h:56px;background:var(--demo-bg);min-height:100dvh;color:var(--demo-body);font-family:var(--font-sans,"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));overflow-x:hidden}.demo-header{z-index:40;padding-top:env(safe-area-inset-top,0px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--demo-border);background:#14161aeb;position:sticky;top:0}.demo-header__inner{min-height:var(--demo-header-h);max-width:var(--demo-max);padding:0 var(--demo-pad-x);justify-content:space-between;align-items:center;gap:12px;margin:0 auto;display:flex}.demo-header__logo{flex-shrink:0;align-items:center;text-decoration:none;display:inline-flex}.demo-header__logo-img{width:auto;height:28px;display:block}.demo-header__badge{color:#075985;letter-spacing:0;white-space:nowrap;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;padding:.12rem .45rem;font-size:.68rem;font-weight:700;line-height:1.2;display:inline-flex}.demo-main{max-width:var(--demo-max);padding:1.25rem var(--demo-pad-x)0;flex-direction:column;gap:1.25rem;margin:0 auto;display:flex}.demo-hero__title{letter-spacing:-.03em;color:var(--demo-text);margin:0 0 .625rem;font-size:1.75rem;font-weight:500;line-height:1.2}.demo-hero__desc{color:var(--demo-muted);margin:0;font-size:.9375rem;line-height:1.55}.demo-video-section{flex-direction:column;gap:.875rem;min-width:0;display:flex}.demo-tabs-scroll{margin:0 calc(var(--demo-pad-x)*-1);padding:0 var(--demo-pad-x);-webkit-overflow-scrolling:touch;scrollbar-width:none;overflow:auto hidden}.demo-tabs-scroll::-webkit-scrollbar{display:none}.demo-tabs{flex-wrap:nowrap;gap:16px;width:max-content;min-width:100%;padding-bottom:4px;display:flex}.demo-tab{appearance:none;min-height:40px;color:var(--demo-muted);letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;padding:6px 2px;font-size:1rem;font-weight:400;line-height:1.2;transition:color .15s;display:inline-flex}.demo-tab--active{color:var(--demo-text);background:0 0;font-weight:500}.demo-video-card{border-radius:var(--demo-radius-card);border:1px solid var(--demo-border);background:var(--demo-surface);min-width:0;padding:0;overflow:hidden}.demo-video-frame{aspect-ratio:16/9;background:#0b0d10;border-radius:0;width:100%;position:relative;overflow:hidden}.demo-video-frame__iframe,.demo-video-poster,.demo-video-poster__img,.demo-video-placeholder{border:0;width:100%;height:100%;position:absolute;inset:0}.demo-video-poster{cursor:pointer;-webkit-tap-highlight-color:transparent;background:#0b0d10;margin:0;padding:0;display:block}.demo-video-poster__img{object-fit:cover}.demo-video-poster__play{background:#fff;border-radius:50%;width:56px;height:56px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 32px #00000073}.demo-video-poster__play:after{content:"";border:8px solid #0000;border-left:14px solid #111;border-right-width:0;position:absolute;top:50%;left:52%;transform:translate(-40%,-50%)}.demo-video-placeholder{text-align:center;background:#101010;justify-content:center;align-items:center;padding:1rem;display:flex}.demo-video-placeholder__label{color:var(--demo-muted);margin:0;font-size:.9375rem;font-weight:500}.demo-card{border-radius:var(--demo-radius-card);border:1px solid var(--demo-border);background:var(--demo-surface);padding:16px}.demo-card__title{letter-spacing:-.02em;color:var(--demo-text);margin:0 0 .75rem;font-size:1.0625rem;font-weight:500;line-height:1.35}.demo-kakao{padding:12px}.demo-desktop-guide__host{letter-spacing:-.03em;color:var(--demo-text);margin:0 0 1rem;font-size:1.25rem;font-weight:500}.demo-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:8px;width:100%;height:48px;min-height:48px;padding:0 16px;font-size:.875rem;font-weight:500;line-height:1.2;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.demo-btn--primary{color:#111;background:#fff;border-color:#fff}.demo-btn--primary:active{color:#111;background:#e5e5e5;border-color:#e5e5e5}.demo-btn--kakao{color:#191600;background:#fee500;border-color:#fee500}.demo-btn--kakao:active{background:#f5dc00;border-color:#f5dc00}.demo-btn--disabled,.demo-btn:disabled{opacity:.45;cursor:not-allowed}.demo-footer{max-width:var(--demo-max);padding:0 var(--demo-pad-x).5rem;text-align:center;margin:1.75rem auto 0}.demo-footer__copy{color:var(--demo-muted);margin:0;font-size:.8125rem;font-weight:500}.demo-toast{left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:50;border:1px solid var(--demo-border);color:#fff;pointer-events:none;background:#1f1f1f;border-radius:14px;max-width:calc(100vw - 40px);padding:.75rem 1rem;font-size:.875rem;font-weight:500;position:fixed;transform:translate(-50%);box-shadow:0 12px 32px #00000073}@media (min-width:390px){.demo-hero__title{font-size:1.875rem}}@media (min-width:720px){.demo-page{--demo-pad-x:24px}.demo-main{gap:1.5rem;padding-top:1.75rem}.demo-hero__title{font-size:2.125rem}.demo-hero__desc{font-size:1rem}.demo-tabs{gap:24px}.demo-tab{font-size:1.25rem}.demo-tab:hover{color:#f5f5f7}.demo-btn--primary:hover{color:#111;background:#e5e5e5;border-color:#e5e5e5}.demo-btn--kakao:hover{background:#f5dc00;border-color:#f5dc00}}