.demo-note { margin: 20px 24px; color: #85757b; font-size: 22px; line-height: 1.6; }
.demo-note[hidden], .demo-list[hidden], .demo-panel[hidden], .empty[hidden], .demo-login-link[hidden] { display: none; }
.demo-list { padding: 0 24px 40px; }
.demo-voucher, .demo-panel { background: #fff; border-radius: 16px; margin-bottom: 20px; padding: 28px; }
.demo-voucher { border-left: 6px solid var(--pink); }
.demo-voucher.inactive { border-left-color: #b7b9c1; }
.demo-voucher-head { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; }
.demo-voucher h2, .demo-panel h2 { margin: 0; font-size: 28px; color: #222; font-weight: 600; }
.demo-status { flex-shrink: 0; color: var(--pink); font-size: 24px; }
.inactive .demo-status { color: #777; }
.demo-voucher p { margin-top: 12px; color: #777; font-size: 23px; line-height: 1.6; overflow-wrap: anywhere; }
.demo-voucher .demo-number { color: #999; font-size: 21px; }
.demo-voucher-links { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed #e9dbe0; }
.demo-voucher-links a, .demo-link { color: var(--pink); font-size: 23px; }
.demo-amount { margin-top: 12px; color: var(--pink); font-size: 44px; font-weight: 600; }
.demo-panel { margin: 20px 24px; }
.demo-panel p { margin-top: 16px; color: #777; font-size: 24px; line-height: 1.6; overflow-wrap: anywhere; }
.demo-record { padding: 24px 0; border-bottom: 1px solid #f0f0f0; }
.demo-record:last-child { border-bottom: 0; }
.demo-record-head { display: flex; justify-content: space-between; gap: 20px; font-size: 26px; }
.demo-record small { display: block; margin-top: 8px; font-size: 22px; color: #999; }
.demo-record strong { color: var(--pink); white-space: nowrap; }
.demo-login-link { color: var(--pink); font-size: 26px; margin-top: 20px; text-align: center; }