/* 2026-11-01 v2 (대표님 "그리지마 동일하게 가져와"): How it works 폰 틀을 히어로 결과 데모와 같게.
   위쪽 버튼·입력창은 히어로가 쓰는 실제 iPhone 캡처 그림(img/header.png, img/composer.png)을 그대로 사용.
   비율 2.07(460/952), 헤더 아래 선 없음. 크기 비율 s = 318/460 (How it works 폰 안쪽 폭 / 히어로 화면 폭) */
#s6-thread{height:521px!important}
#s6-phone.notification-demo{aspect-ratio:460/952!important}
.demo-phone .phone-head{border-bottom:0!important}
.demo-phone .phone-head .back,.demo-phone .phone-head .menu{font-size:0!important;color:transparent!important;background-color:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;display:block!important;top:-6px!important;height:83px!important;background-image:url(/hiw-frame-20261101/img/header.png)!important;background-repeat:no-repeat!important;background-size:318px auto!important;pointer-events:none}
.demo-phone .phone-head .back{left:0!important;width:108px!important;background-position:0 -28px!important}
.demo-phone .phone-head .menu{right:0!important;left:auto!important;width:76px!important;background-position:-242px -28px!important}
.demo-phone .phone-head .back *,.demo-phone .phone-head .menu *{display:none!important}
#s6-composer{position:relative;height:46px!important;padding:0!important;border:0!important;background:url(/hiw-frame-20261101/img/composer.png) no-repeat 0 -7px/318px auto!important}
#s6-composer>span:first-child{display:none!important}
#s6-composer-text,#s6-composer .send{display:none!important}
#s6-composer.is-typing #s6-composer-text{display:flex!important;position:absolute;left:64.7px;width:230.6px;top:50%;transform:translateY(-50%);min-height:32px;box-sizing:border-box;border-radius:16px;background:#FFFFFE;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);padding:5px 30px 5px 13px;align-items:center;font:15px/1.35 -apple-system,"SF Pro Text","Apple SD Gothic Neo",system-ui,sans-serif;color:#1c1c1e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s6-composer.is-typing .send{display:grid!important;position:absolute;right:calc(318px - 64.7px - 230.6px + 4px);top:50%;transform:translateY(-50%);width:22px!important;height:22px!important;border-radius:50%;background:#0A84FF!important;font-size:0!important;place-items:center;z-index:2}
#s6-composer.is-typing .send::after{content:"";width:9px;height:9px;border:solid #fff;border-width:2px 0 0 2px;transform:translateY(2px) rotate(45deg)}
/* 히어로와 같은 가장자리 페이드(compact-header-art·compact-back·compact-video의 mask 그대로) */
.demo-phone .phone-head .back{-webkit-mask-image:linear-gradient(#000 55%,transparent 90%),linear-gradient(to right,#000 75%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(#000 55%,transparent 90%),linear-gradient(to right,#000 75%,transparent);mask-composite:intersect}
.demo-phone .phone-head .menu{-webkit-mask-image:linear-gradient(#000 55%,transparent 90%),linear-gradient(to left,#000 75%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(#000 55%,transparent 90%),linear-gradient(to left,#000 75%,transparent);mask-composite:intersect}