/* 6つの操作画面の共通表示。実演の操作パネルは既存CSSを使う。 */
body.demo-app{margin:0}
/* 操作画面の裸の header 指定だけを打ち消す。背景・下線は brand.css を使う。 */
.demo-app .qz-site-header{display:block;padding:0}
/* ページ側の button:hover 等を共通メニューへ漏らさない。値は brand.css と同じ。 */
.demo-app .qz-site-header .qz-menu-toggle:is(:hover,:active){background:#fff;border-color:#dce2e9}
.demo-app .qz-site-header .qz-brand-logo{width:240px;height:52px}
.demo-app .qz-site-header .qz-header-menu,.demo-app .qz-site-header .qz-header-menu>a{font-size:14px}
/* 余白は共通の footer.css に任せる（ここで padding を消すと、操作画面だけフッターの上が詰まる） */
.demo-app .qz-site-footer{display:block;text-align:left}
.demo-app .breadcrumb{display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 16px;font-size:12px}
.demo-app .breadcrumb a{white-space:normal}
.demo-app .demo-return{margin:20px 0;font-size:14px}
.demo-app .demo-disclosure{max-width:1060px;padding:14px 18px;margin:12px 0 28px;background:#fff;border:1px solid #cbd8cf;border-radius:8px;font-size:14px;line-height:1.8}
.demo-app .demo-disclosure summary{cursor:pointer;font-weight:700}
.demo-app .demo-disclosure p{margin:12px 0 0}
.demo-app.intake-entry>main{box-sizing:border-box;width:min(1220px,calc(100% - 96px));max-width:none;margin-inline:auto;padding:25px 0}
.demo-app #feedback:empty{display:none}
.demo-app.review-active>.qz-site-header,.demo-app.intake-entry:has(#workspace:not([hidden]))>.qz-site-header{display:none}
html:has(.demo-app.review-active),html:has(.demo-app.intake-entry #workspace:not([hidden])){scroll-padding-top:0}
@media(max-width:860px){.demo-app.intake-entry>main{width:calc(100% - 40px)}}
@media(max-width:600px){
 .demo-app .qz-site-header .qz-brand-logo{width:180px;height:40px}
 .demo-app .demo-disclosure{padding:12px;font-size:13px}
 .demo-app.intake-entry #mailbox{max-height:330px;overflow:auto;overscroll-behavior:contain;border-bottom:1px solid #d8e2dc}
 .demo-app.intake-entry #reading-progress{max-height:210px;overflow:auto;overscroll-behavior:contain}
}

/* 冒頭の案内は6画面でそろえ、操作の前の重複を減らす。 */
.demo-app .intro{margin:0 0 12px}
.demo-app .intro h1{font-size:clamp(24px,2.5vw,32px);line-height:1.4;margin:8px 0}
.demo-app .intro .demo-return{margin:8px 0}
.demo-app .breadcrumb{word-break:keep-all;overflow-wrap:normal}
.demo-app .demo-disclosure{margin:12px 0 20px;padding:10px 14px}
.demo-app .demo-disclosure summary{word-break:keep-all;overflow-wrap:normal}
.demo-app .skip{position:absolute;left:-10000px}
.demo-app .skip:focus{left:10px;top:10px;z-index:100;padding:12px;background:#fff}