/* demo.html · 관리자 체험 (every selector scoped to .pg-demo) */
.pg-demo [hidden]{display:none!important}
.pg-demo .pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--blue-50);color:#1557c0;font-size:14px;font-weight:600}
.pg-demo .pill i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.pg-demo .hchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:var(--g100);font-size:13px;font-weight:600;color:var(--g700)}
.pg-demo .hchip .ico{font-size:14px;color:var(--blue);stroke-width:2.6}
/* state chip: text + shape, never color only */
.pg-demo .st{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:8px;font-size:13px;font-weight:700;line-height:1;white-space:nowrap;background:var(--g100);color:var(--g700)}
.pg-demo .st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pg-demo .st.wait{background:var(--orange-50);color:#b35300}
.pg-demo .st.wait::before{border-radius:2px;transform:rotate(45deg)}
.pg-demo .st.re{background:#fff0e6;color:#c2410c}
.pg-demo .st.re::before{content:"↺";width:auto;height:auto;background:none;font-size:13px}
.pg-demo .st.fail{background:var(--red-50);color:#c01f2e}
.pg-demo .st.fail::before{content:"!";display:grid;place-items:center;width:14px;height:14px;background:#d92c3a;color:#fff;font-size:10px;font-weight:800}
.pg-demo .st.ok{background:var(--green-50);color:#027a4a}
.pg-demo .st.ok::before{content:"✓";width:auto;height:auto;background:none;font-size:12px}
.pg-demo .st.info{background:var(--blue-50);color:var(--blue-700)}
.pg-demo .st.grey{background:var(--g100);color:var(--g700)}
.pg-demo .st.grey::before{background:none;box-shadow:inset 0 0 0 1.5px currentColor}
/* ── hero visual ── */
.pg-demo .hv{position:relative;width:min(540px,100%);padding:0 0 112px}
.pg-demo .hv-win{overflow:hidden;border-radius:24px;background:#fff;box-shadow:var(--shadow-float),0 0 0 1px rgba(2,32,71,.05)}
.pg-demo .hv-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--g100);font-size:13px;font-weight:700;color:var(--g800)}
.pg-demo .hv-bar i{width:8px;height:8px;border-radius:50%;background:var(--g200)}
.pg-demo .hv-bar span{margin-left:8px}
.pg-demo .hv-bar .badge{margin-left:auto;height:24px;font-size:12px}
.pg-demo .hv-body{display:grid;grid-template-columns:132px minmax(0,1fr)}
.pg-demo .hv-side{margin:0;padding:12px 8px;list-style:none;background:var(--g50);border-right:1px solid var(--g100)}
.pg-demo .hv-side li{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--g700)}
.pg-demo .hv-side li.on{background:#fff;color:var(--g900);box-shadow:0 1px 3px rgba(2,32,71,.08)}
.pg-demo .hv-side .ico{font-size:15px}
.pg-demo .hv-side b{margin-left:auto;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--orange);color:#fff;font-size:11px}
.pg-demo .hv-side b.r{background:var(--red)}
.pg-demo .hv-main{padding:16px 16px 18px}
.pg-demo .hv-k{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--g600)}
.pg-demo .hv-rows{margin:0;padding:0;list-style:none}
.pg-demo .hv-rows li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--g100)}
.pg-demo .hv-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;font-size:16px}
.pg-demo .hv-ic.o{background:var(--orange-50);color:var(--orange)}.pg-demo .hv-ic.b{background:var(--blue-50);color:var(--blue)}.pg-demo .hv-ic.r{background:var(--red-50);color:var(--red)}.pg-demo .hv-ic.g{background:var(--green-50);color:var(--green)}
.pg-demo .hv-t b{display:block;overflow:hidden;font-size:13px;font-weight:700;line-height:1.4;white-space:nowrap;text-overflow:ellipsis}
.pg-demo .hv-t small{display:block;font-size:12px;color:var(--g600)}
.pg-demo .hv-rows .st{height:24px;font-size:12px}
.pg-demo .hv-float{position:absolute;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:var(--shadow-float)}
.pg-demo .hv-cmp{left:-28px;bottom:0;width:260px}
.pg-demo .hv-fk{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--g600)}
.pg-demo .hv-ba{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--g700)}
.pg-demo .hv-ba small{display:block;font-size:11px;font-weight:600;color:var(--g500)}
.pg-demo .hv-ba b{color:var(--red)}
.pg-demo .hv-ba .ico{color:var(--g400)}
.pg-demo .hv-fs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.pg-demo .hv-fs .st{height:22px;font-size:11px}
.pg-demo .hv-lock{right:-18px;bottom:44px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;line-height:1.4}
@media (prefers-reduced-motion:no-preference){
.pg-demo .hv-cmp{animation:pgDemoFloat 6s ease-in-out infinite}
.pg-demo .hv-lock{animation:pgDemoFloat 7s ease-in-out -2s infinite}
}
@keyframes pgDemoFloat{50%{transform:translateY(-8px)}}
@media (max-width:1200px){.pg-demo .hv-cmp{left:0}.pg-demo .hv-lock{right:0}}
@media (max-width:560px){.pg-demo .hv{padding:0}.pg-demo .hv-float{display:none}.pg-demo .hv-body{grid-template-columns:minmax(0,1fr)}.pg-demo .hv-side{display:none}}
/* ── before ── */
.pg-demo .before-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.pg-demo .box{padding:8px 24px;border-radius:24px;background:#fff}
.pg-demo .box .rows{border-top:0}
.pg-demo .box .rows>li:last-child{border-bottom:0}
.pg-demo .know{padding:30px 28px;border-radius:24px;background:#fff}
.pg-demo .know h3{margin:0 0 8px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.pg-demo .know ul{margin:0;padding:0;list-style:none}
.pg-demo .know li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--g100)}
.pg-demo .know li:first-child{border-top:0}
.pg-demo .ki{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--g100);color:var(--g700);font-size:18px}
.pg-demo .know p{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--g700)}
.pg-demo .know b{color:var(--g900)}
.pg-demo .know li.warn .ki{background:var(--orange-50);color:var(--orange)}
@media (max-width:960px){.pg-demo .before-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.pg-demo .box{padding:4px 18px}}
/* ── explanation blocks ── */
.pg-demo .flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pg-demo .flow.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-demo .flow>li{display:flex;flex-direction:column;padding:24px 22px;border-radius:22px;background:#fff}
.pg-demo .sec:not(.grey) .flow>li{background:var(--g50)}
.pg-demo .fn{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--g100);color:var(--g700);font-size:14px;font-weight:800}
.pg-demo .sec:not(.grey) .fn{background:#fff}
.pg-demo .flow>li.gate .fn{background:var(--blue);color:#fff}
.pg-demo .flow h3{margin:14px 0 6px;font-size:18px;line-height:1.45;font-weight:700;letter-spacing:-.02em}
.pg-demo .flow p{margin:0;font-size:15px;line-height:1.6;color:var(--g700)}
.pg-demo .flow p b{color:var(--g900)}
.pg-demo .flow .fr{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.pg-demo .flow .fr span{padding:4px 9px;border-radius:8px;background:var(--g50);font-size:13px;font-weight:600;line-height:1.45;color:var(--g700)}
.pg-demo .sec:not(.grey) .flow .fr span{background:#fff}
.pg-demo .sub-h{margin:64px 0 20px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.pg-demo .sub-h.first{margin-top:0}
.pg-demo .impact .card h3,.pg-demo .scen .card h3{margin-top:16px}
.pg-demo .impact .st,.pg-demo .scen .st{align-self:flex-start}
.pg-demo .try{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:40px}
.pg-demo .more{margin-top:28px;border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px var(--g200)}
.pg-demo .sec.grey .more{box-shadow:none}
.pg-demo .more summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;cursor:pointer;list-style:none;border-radius:22px}
.pg-demo .more summary::-webkit-details-marker{display:none}
.pg-demo .more summary b{display:block;font-size:18px;font-weight:700}
.pg-demo .more summary small{display:block;font-size:14px;color:var(--g600)}
.pg-demo .more summary .ico{font-size:22px;color:var(--g500);transition:transform .3s var(--ease)}
.pg-demo .more[open] summary .ico{transform:rotate(180deg)}
.pg-demo .more .tbl-wrap{margin:0 16px 16px;box-shadow:inset 0 0 0 1px var(--g100)}
.pg-demo .more .tbl caption{padding:12px 18px}
.pg-demo .note{margin-top:20px}
.pg-demo .vtrack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;counter-reset:v}
.pg-demo .vtrack li{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;background:var(--g50)}
.pg-demo .vtrack li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;z-index:1;display:grid;place-items:center;width:20px;height:20px;margin-top:-10px;font-weight:800;color:var(--g400)}
.pg-demo .vtrack li.re{background:#fff4ec}
.pg-demo .vn{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--g900)}
.pg-demo .vtrack b{font-size:15px;font-weight:600;line-height:1.5;color:var(--g800)}
.pg-demo .vtrack .st{align-self:flex-start}
.pg-demo .req-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:64px}
.pg-demo .stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.pg-demo .stages li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;border-radius:18px;background:var(--g50);font-size:15px;font-weight:700}
.pg-demo .stages li span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue-50);color:var(--blue-700);font-size:14px}
.pg-demo .stages li:last-child span{background:var(--blue);color:#fff}
.pg-demo .stage-note{margin:16px 0 0;font-size:15px;color:var(--g700)}
.pg-demo .card-foot b.inl{display:inline;margin:0;font-size:inherit;color:var(--g900)}
.pg-demo .diff-tbl tbody th{white-space:nowrap}
.pg-demo .faq p .link{margin-left:4px;font-size:15px}
.pg-demo .rel{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.pg-demo .rel a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--g700);text-decoration:none}
.pg-demo .rel a:hover{color:var(--g900);background:var(--g100)}
@media (max-width:1000px){.pg-demo .flow,.pg-demo .flow.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-demo .vtrack{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-demo .vtrack li:nth-child(2)::after{display:none}.pg-demo .req-grid{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:640px){.pg-demo .flow,.pg-demo .flow.c4,.pg-demo .vtrack{grid-template-columns:minmax(0,1fr)}.pg-demo .vtrack li:not(:last-child)::after{content:"↓";right:auto;left:28px;top:auto;bottom:-16px;margin:0;display:grid}.pg-demo .more summary{padding:18px}.pg-demo .more .tbl-wrap{margin:0 12px 12px}.pg-demo .diff-tbl tbody th{white-space:normal}.pg-demo .stages li{font-size:14px;padding:14px 4px}}
/* ════ interactive admin demo ════ */
.pg-demo .dm{position:relative;overflow:hidden;border-radius:28px;background:#fff;box-shadow:var(--shadow-float),0 0 0 1px rgba(2,32,71,.06)}
.pg-demo .dm-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 18px;border-bottom:1px solid var(--g100)}
.pg-demo .dm-brand{display:flex;align-items:center;gap:10px}
.pg-demo .dm-brand b{display:block;font-size:15px;font-weight:800;line-height:1.3}
.pg-demo .dm-brand small{display:block;font-size:12px;color:var(--g600)}
.pg-demo .dm-logo{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--g900);color:#fff;font-size:13px;font-weight:800}
.pg-demo .dm-badges{display:flex;flex-wrap:wrap;gap:6px}
.pg-demo .dm-tools{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.pg-demo .dm-tools .btn{height:38px;padding:0 13px;font-size:14px}
.pg-demo .dm-tools .ico{font-size:15px}
.pg-demo .dm-guide{padding:16px 18px;background:var(--blue-50);border-bottom:1px solid var(--blue-100)}
.pg-demo .dm-guide ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pg-demo .dm-guide li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.55;color:var(--g800)}
.pg-demo .dm-guide li b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:13px}
.pg-demo .dm-guide strong{display:block;color:var(--g900)}
.pg-demo .dm-guide p{margin:12px 0 0;font-size:13px;color:var(--g700)}
.pg-demo .dm-body{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:680px}
.pg-demo .dm-menu{display:flex;flex-direction:column;gap:4px;padding:14px 10px;background:var(--g50);border-right:1px solid var(--g100)}
.pg-demo .dm-menu [role="tab"]{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:14px;background:none;text-align:left;cursor:pointer;color:var(--g700);transition:background .2s}
.pg-demo .dm-menu [role="tab"]:hover{background:var(--g100)}
.pg-demo .dm-menu [role="tab"]:focus-visible{outline-offset:-2px}
.pg-demo .dm-menu [role="tab"][aria-selected="true"]{background:#fff;color:var(--g900);box-shadow:0 1px 4px rgba(2,32,71,.1)}
.pg-demo .dm-mi{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--g100);font-size:17px}
.pg-demo .dm-menu [aria-selected="true"] .dm-mi{background:var(--blue-50);color:var(--blue)}
.pg-demo .dm-mt b{display:block;font-size:15px;font-weight:700;line-height:1.35}
.pg-demo .dm-mt small{display:block;font-size:12px;color:var(--g600);line-height:1.35}
.pg-demo .dm-count:empty{display:none}
.pg-demo .dm-count{padding:3px 7px;border-radius:7px;background:var(--orange-50);color:#b35300;font-size:11px;font-weight:700;white-space:nowrap}
.pg-demo .dm-count.fail{background:var(--red-50);color:#c01f2e}
.pg-demo .dm-panel{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-width:0}
.pg-demo .dm-panel:focus-visible{outline-offset:-3px}
.pg-demo .dm-nojs{grid-column:1/-1;margin:0;padding:32px;font-size:15px;color:var(--g700)}
.pg-demo .dm-work{min-width:0;padding:22px 26px 28px}
.pg-demo .dm-side{min-width:0;padding:22px 20px 28px;background:var(--g50);border-left:1px solid var(--g100)}
.pg-demo .dm-toast{position:absolute;left:50%;bottom:20px;z-index:5;max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;background:var(--g900);color:#fff;font-size:14px;font-weight:600;transform:translateX(-50%);box-shadow:var(--shadow-float)}
@media (max-width:1180px){.pg-demo .dm-panel{grid-template-columns:minmax(0,1fr)}.pg-demo .dm-side{border-left:0;border-top:1px solid var(--g100)}}
@media (max-width:760px){
.pg-demo .dm{border-radius:22px}
.pg-demo .dm-body{grid-template-columns:minmax(0,1fr);min-height:0}
.pg-demo .dm-menu{border-right:0;border-bottom:1px solid var(--g100)}
.pg-demo .dm-tools{margin-left:0}
.pg-demo .dm-guide ol{grid-template-columns:minmax(0,1fr)}
.pg-demo .dm-work{padding:18px 16px 22px}
.pg-demo .dm-side{padding:18px 16px 22px}
.pg-demo .dm-top{padding:12px 14px}
}
/* screen parts (rendered by demo.js) */
.pg-demo .dm-hd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:14px}
.pg-demo .dm-back{display:grid;place-items:center;width:38px;height:38px;margin-left:-8px;border:0;border-radius:12px;background:none;color:var(--g800);font-size:22px;cursor:pointer}
.pg-demo .dm-back:hover{background:var(--g100)}
.pg-demo .dm-back .ico{transform:rotate(180deg)}
.pg-demo .dm-h{margin:0;font-size:21px;line-height:1.4;font-weight:800;letter-spacing:-.02em}
.pg-demo .dm-h:focus{outline:none}
.pg-demo .dm-h:focus-visible{outline:2px solid var(--blue)}
.pg-demo .dm-hd .st,.pg-demo .dm-hd .dm-hx{margin-left:auto}
.pg-demo .dm-kick{display:block;width:100%;font-size:13px;font-weight:700;color:var(--g600)}
.pg-demo .dm-fs{min-width:0;margin:0 0 16px;padding:0;border:0}
.pg-demo .dm-lg{margin:0 0 6px;padding:0;font-size:13px;font-weight:700;color:var(--g700)}
.pg-demo .dm-lg em{font-style:normal;font-weight:500;color:var(--g500)}
.pg-demo .dm-hint{margin:6px 0 0;font-size:13px;color:var(--g600)}
.pg-demo .dm-seg{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:4px;border:0;border-radius:14px;background:var(--g100)}
.pg-demo .dm-seg.plain{padding:0;background:none}
.pg-demo .dm-seg label{position:relative;flex:1 1 auto}
.pg-demo .dm-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pg-demo .dm-seg span{display:grid;place-items:center;min-height:38px;padding:4px 12px;border-radius:11px;font-size:14px;font-weight:600;line-height:1.35;text-align:center;color:var(--g700)}
.pg-demo .dm-seg.plain span{background:var(--g100)}
.pg-demo .dm-seg input:checked+span{background:#fff;color:var(--g900);box-shadow:0 1px 3px rgba(2,32,71,.12)}
.pg-demo .dm-seg.plain input:checked+span{background:var(--blue-50);color:var(--blue-700);box-shadow:inset 0 0 0 1.5px var(--blue)}
.pg-demo .dm-seg input:focus-visible+span{outline:2px solid var(--blue);outline-offset:1px}
.pg-demo .dm-seg small{display:block;font-size:12px;font-weight:500;color:var(--g600)}
.pg-demo .dm-help{margin:-8px 0 16px;font-size:13px;color:var(--g600)}
.pg-demo .dm-sec{margin-top:20px}
.pg-demo .dm-sec-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 8px;font-size:15px;font-weight:700;color:var(--g800)}
.pg-demo .dm-list{margin:0;padding:0;list-style:none}
.pg-demo .dm-list>li+li{border-top:1px solid var(--g100)}
.pg-demo .dm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:13px 4px;border:0;background:none;text-align:left;color:inherit;font-size:15px;text-decoration:none}
.pg-demo button.dm-row{cursor:pointer;border-radius:12px}
.pg-demo button.dm-row:hover{background:var(--g50)}
.pg-demo .dm-row b{display:block;font-weight:700;line-height:1.45}
.pg-demo .dm-row small{display:block;margin-top:2px;font-size:13px;color:var(--g600);line-height:1.5}
.pg-demo .dm-row .dm-re{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--g700);text-align:right}
.pg-demo .dm-row .dm-re .ico{font-size:18px;color:var(--g400)}
.pg-demo .dm-add{display:flex;align-items:center;gap:8px;width:100%;margin-top:8px;padding:13px 14px;border:1.5px dashed var(--g300);border-radius:14px;background:#fff;color:var(--blue-700);font-size:15px;font-weight:700;cursor:pointer}
.pg-demo .dm-add:hover{background:var(--blue-50);border-color:var(--blue-100)}
.pg-demo .dm-card{padding:16px 18px;border-radius:18px;background:var(--g50)}
.pg-demo .dm-side .dm-card{background:#fff}
.pg-demo .dm-note{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;margin:12px 0;padding:14px 16px;border-radius:16px;background:var(--g50);font-size:14px;line-height:1.6;color:var(--g800)}
.pg-demo .dm-note>.ico{margin-top:1px;font-size:20px;color:var(--g600)}
.pg-demo .dm-note b{color:var(--g900)}
.pg-demo .dm-note p{margin:0}
.pg-demo .dm-note .dm-acts{margin-top:10px}
.pg-demo .dm-note.info{background:var(--blue-50)}.pg-demo .dm-note.info>.ico{color:var(--blue)}
.pg-demo .dm-note.warn{background:var(--orange-50)}.pg-demo .dm-note.warn>.ico{color:var(--orange)}
.pg-demo .dm-note.err{background:var(--red-50)}.pg-demo .dm-note.err>.ico{color:var(--red)}
.pg-demo .dm-note.ok{background:var(--green-50)}.pg-demo .dm-note.ok>.ico{color:var(--green)}
.pg-demo .dm-field{display:block;margin-bottom:14px}
.pg-demo .dm-lbl{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--g700)}
.pg-demo .dm-lbl em{font-style:normal;font-weight:500;color:var(--g500)}
.pg-demo .dm-inp{display:block;width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--g300);border-radius:12px;background:#fff;font-size:16px;color:var(--g900)}
.pg-demo textarea.dm-inp{min-height:88px;line-height:1.6;resize:vertical}
.pg-demo .dm-inp:focus-visible{outline:none;border-color:var(--blue)}
.pg-demo .dm-inp[aria-invalid="true"]{border-color:var(--red)}
.pg-demo .dm-inp:disabled{background:var(--g100);color:var(--g500);cursor:not-allowed}
.pg-demo .dm-err{margin:6px 0 0;font-size:13px;font-weight:600;color:#c01f2e}
.pg-demo .dm-err:empty{display:none}
.pg-demo .dm-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pg-demo .dm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.pg-demo .dm-acts .btn{height:46px;padding:0 16px;border-radius:13px;font-size:15px}
.pg-demo .dm-acts .btn.btn-sm{height:38px;padding:0 12px;border-radius:10px;font-size:14px}
.pg-demo .dm-acts .grow{flex:1 1 180px}
.pg-demo .dm-acts.end{justify-content:flex-end}
.pg-demo .dm-tbtn{display:inline-flex;align-items:center;gap:4px;min-height:38px;padding:0 6px;border:0;border-radius:8px;background:none;font-size:14px;font-weight:600;color:var(--blue-700);cursor:pointer}
.pg-demo .dm-tbtn:hover{text-decoration:underline}
.pg-demo .dm-tbtn.muted{color:var(--g600)}
.pg-demo .btn[aria-disabled="true"],.pg-demo .btn:disabled{background:var(--g100);color:var(--g500);cursor:not-allowed}
.pg-demo .btn-primary[aria-disabled="true"]{background:var(--blue-100);color:#fff}
.pg-demo .btn[aria-disabled="true"] .ico{color:inherit}
.pg-demo .btn[aria-busy="true"]::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:pgDemoSpin .8s linear infinite}
@keyframes pgDemoSpin{to{transform:rotate(360deg)}}
.pg-demo .dm-cmp{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:8px;padding:16px;border-radius:18px;background:var(--g50)}
.pg-demo .dm-cmp>div{padding:12px 14px;border-radius:14px;background:#fff}
.pg-demo .dm-cmp small{display:block;font-size:12px;font-weight:700;color:var(--g600)}
.pg-demo .dm-cmp b{display:block;font-size:16px;line-height:1.45}
.pg-demo .dm-cmp .after b{color:var(--blue-700)}
.pg-demo .dm-cmp>.ico{justify-self:center;font-size:20px;color:var(--g400)}
.pg-demo .dm-cmp p{grid-column:1/-1;margin:2px 0 0;font-size:13px;color:var(--g700)}
.pg-demo .dm-imp{margin:0;padding:0;list-style:none}
.pg-demo .dm-imp>li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:11px 0;border-top:1px solid var(--g100);font-size:14px;line-height:1.55}
.pg-demo .dm-imp>li:first-child{border-top:0}
.pg-demo .dm-imp>li>.ico{margin-top:2px;font-size:18px}
.pg-demo .dm-imp .ok>.ico{color:var(--green)}.pg-demo .dm-imp .wait>.ico{color:var(--orange)}.pg-demo .dm-imp .fail>.ico{color:var(--red)}
.pg-demo .dm-imp b{font-weight:700}
.pg-demo .dm-imp small{display:block;color:var(--g600)}
.pg-demo .dm-quote{margin:8px 0 0;padding:10px 12px;border-left:3px solid var(--orange);border-radius:0 10px 10px 0;background:var(--orange-50);font-size:13px;color:var(--g800)}
.pg-demo .dm-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:14px}
.pg-demo .dm-kv dt{font-weight:600;color:var(--g600)}
.pg-demo .dm-kv dd{margin:0;font-weight:600;color:var(--g900);overflow-wrap:anywhere}
.pg-demo .dm-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;padding:0;list-style:none}
.pg-demo .dm-sum li{padding:12px 14px;border-radius:14px;background:var(--g50);font-size:13px;font-weight:600;color:var(--g600)}
.pg-demo .dm-sum b{display:block;font-size:20px;font-weight:800;color:var(--g900)}
.pg-demo .dm-filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;padding:0;list-style:none}
.pg-demo .dm-filters button{height:34px;padding:0 12px;border:0;border-radius:999px;background:var(--g100);font-size:13px;font-weight:600;color:var(--g700);cursor:pointer}
.pg-demo .dm-filters button[aria-pressed="true"]{background:var(--g900);color:#fff}
.pg-demo .dm-empty{padding:28px 16px;border-radius:16px;background:var(--g50);text-align:center;font-size:14px;color:var(--g700)}
.pg-demo .dm-empty p{margin:0 0 10px}
.pg-demo .dm-chk{margin-top:10px;padding:14px 16px;border-radius:16px;background:var(--orange-50)}
.pg-demo .dm-chk.done{background:var(--g50)}
.pg-demo .dm-chk-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:15px;font-weight:700}
.pg-demo .dm-chk-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;font-size:12px;font-weight:800}
.pg-demo .dm-chk.done .dm-chk-n{background:var(--green)}
.pg-demo .dm-chk p{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--g800)}
.pg-demo .dm-chk .dm-acts{margin-top:10px}
.pg-demo .dm-chk .dm-done{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:14px;font-weight:700;color:#027a4a}
.pg-demo .dm-src{margin:0;padding:0;list-style:none;font-size:14px}
.pg-demo .dm-src li{display:flex;flex-wrap:wrap;gap:4px 8px;padding:6px 0;color:var(--g800)}
.pg-demo .dm-src li b{font-weight:700}
.pg-demo .dm-src li .st{height:22px;font-size:11px}
.pg-demo .dm-art{margin:0;padding:16px 18px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--g200);font-size:15px;line-height:1.8}
.pg-demo .dm-art p{margin:0}
.pg-demo .dm-art p+p{margin-top:6px}
.pg-demo .dm-mark{text-decoration:underline wavy var(--orange);text-decoration-thickness:1.5px;text-underline-offset:4px}
.pg-demo .dm-mark.hl{background:#fff1c2}
.pg-demo .dm-mn{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:4px;border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:800;vertical-align:2px}
.pg-demo .dm-stamp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0;padding:12px 14px;border-radius:14px;background:var(--green-50);font-size:14px;font-weight:600;color:var(--g800)}
.pg-demo .dm-stamp.info{background:var(--blue-50)}
.pg-demo .dm-status{padding:20px;border-radius:20px;background:var(--g50)}
.pg-demo .dm-status.fail{background:var(--red-50)}.pg-demo .dm-status.ok{background:var(--green-50)}.pg-demo .dm-status.wait{background:var(--orange-50)}.pg-demo .dm-status.info{background:var(--blue-50)}
.pg-demo .dm-status strong{display:block;margin-top:10px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.pg-demo .dm-status p{margin:4px 0 0;font-size:14px;color:var(--g800)}
.pg-demo .dm-hist{margin:0;padding:0;list-style:none}
.pg-demo .dm-hist li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding-bottom:14px;font-size:14px;line-height:1.55}
.pg-demo .dm-hist li:not(:last-child)::after{content:"";position:absolute;left:14.5px;top:30px;bottom:0;width:1px;background:var(--g200)}
.pg-demo .dm-hn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--g200);font-size:11px;font-weight:800;color:var(--g700)}
.pg-demo .dm-work .dm-hn{background:var(--g50)}
.pg-demo .dm-hist li.new .dm-hn{background:var(--blue);color:#fff;box-shadow:none}
.pg-demo .dm-hist b{display:block;font-weight:700;color:var(--g900)}
.pg-demo .dm-hist small{display:block;color:var(--g600)}
.pg-demo .dm-date{display:grid;place-items:center;width:52px;height:56px;border-radius:14px;background:var(--blue-50);color:var(--blue-700);font-size:12px;font-weight:700;line-height:1.2;text-align:center}
.pg-demo .dm-date b{font-size:20px}
.pg-demo .dm-sched{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0}
.pg-demo .dm-sched b{display:block;font-size:15px;line-height:1.45}
.pg-demo .dm-sched small{display:block;font-size:13px;color:var(--g600)}
.pg-demo .dm-sched .dm-acts{grid-column:2;margin-top:4px}
.pg-demo .dm-side-h{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--g600)}
.pg-demo .dm-side-b{margin:0 0 20px}
.pg-demo .dm-now{margin:0;font-size:15px;font-weight:600;line-height:1.6;color:var(--g900)}
.pg-demo .dm-real{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--g200);font-size:13px;line-height:1.6;color:var(--g700)}
.pg-demo .dm-real b{color:var(--g900)}
.pg-demo .dm-side .link{margin-top:10px;font-size:14px}
.pg-demo .dm-pm{overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(2,32,71,.06)}
.pg-demo .dm-pm .pm-url span{overflow-wrap:anywhere}
.pg-demo .dm-pm-lab{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px 0}
.pg-demo .dm-pm-lab small{font-size:12px;color:var(--g600)}
.pg-demo .dm-pm-note{margin:10px 14px 0;padding:9px 12px;border-radius:10px;background:var(--red-50);font-size:13px;font-weight:700;color:#c01f2e}
.pg-demo .dm-pm h4{margin:14px 14px 6px;font-size:13px;font-weight:800;color:var(--g700)}
.pg-demo .dm-pm ul{margin:0 14px;padding:0;list-style:none}
.pg-demo .dm-pm li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--g100);font-size:13px;color:var(--g800)}
.pg-demo .dm-pm li>span:first-child{flex:none;white-space:nowrap;color:var(--g700)}
.pg-demo .dm-pm li>span:last-child{font-weight:600;text-align:right}
.pg-demo .dm-pm li.chg>span:last-child{color:var(--blue-700)}
.pg-demo .dm-pm li.off>span:last-child{color:#c01f2e}
.pg-demo .dm-pm .dm-new{margin-left:4px;padding:1px 5px;border-radius:5px;background:var(--blue-50);color:var(--blue-700);font-size:11px;font-weight:700}
.pg-demo .dm-pm-foot{margin:12px 0 0;padding:10px 14px;background:var(--g50);font-size:12px;color:var(--g600)}
.pg-demo .dm-cap{margin:8px 0 0;font-size:12px;color:var(--g600)}
.pg-demo .dm-log{margin:0;padding:0;list-style:none}
.pg-demo .dm-log li{padding:10px 0;border-top:1px solid var(--g200);font-size:13px;line-height:1.55;color:var(--g700)}
.pg-demo .dm-log li:first-child{border-top:0}
.pg-demo .dm-log b{color:var(--g900)}
.pg-demo .dm-log:focus{outline:none}
.pg-demo .dm-stg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px 0 0;padding:0;list-style:none}
.pg-demo .dm-stg li{padding:10px 4px;border-radius:12px;background:var(--g100);text-align:center;font-size:13px;font-weight:700;color:var(--g500)}
.pg-demo .dm-stg li.done{background:var(--blue-50);color:var(--blue-700)}
.pg-demo .dm-stg li.cur{background:var(--blue);color:#fff}
.pg-demo .dm-radio{display:grid;gap:8px;margin:0 0 14px;padding:0;border:0}
.pg-demo .dm-radio legend{margin-bottom:8px;padding:0;font-size:14px;font-weight:600;color:var(--g700)}
.pg-demo .dm-radio label{position:relative;display:block}
.pg-demo .dm-radio input{position:absolute;left:14px;top:17px;width:18px;height:18px;margin:0;accent-color:var(--blue)}
.pg-demo .dm-radio span{display:block;padding:13px 14px 13px 42px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--g200);font-size:15px;font-weight:600;line-height:1.45;cursor:pointer}
.pg-demo .dm-radio small{display:block;font-size:13px;font-weight:500;color:var(--g600)}
.pg-demo .dm-radio input:checked+span{background:var(--blue-50);box-shadow:inset 0 0 0 1.5px var(--blue)}
.pg-demo .dm-radio[aria-invalid="true"] span{box-shadow:inset 0 0 0 1.5px var(--red)}
.pg-demo .dm-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;margin:12px 0;padding:14px;border-radius:14px;background:var(--g50);font-size:14px;font-weight:600;cursor:pointer}
.pg-demo .dm-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue)}
.pg-demo .dm-radio legend em{font-style:normal;font-weight:500;color:var(--g500)}
.pg-demo .dm-side .dm-empty{background:#fff}
.pg-demo .dm-pmk{margin-top:4px;box-shadow:inset 0 0 0 1px var(--g200)}
.pg-demo .dm-pmk .dm-art{margin:0 16px 16px;box-shadow:none;padding:0}
.pg-demo .dm-branch li[aria-current="true"]{margin:0 -10px;padding:10px;border-radius:12px;background:#fff}
.pg-demo .dm-branch li[aria-current="true"] b{color:var(--blue-700)}
.pg-demo .dm-status .st{background:#fff}
.pg-demo .dm-list>li.dm-sched{display:grid}
.pg-demo .dm-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all}
@media (max-width:560px){
.pg-demo .dm-two{grid-template-columns:minmax(0,1fr)}
.pg-demo .dm-cmp{grid-template-columns:minmax(0,1fr)}
.pg-demo .dm-cmp>.ico{transform:rotate(90deg)}
.pg-demo .dm-sum b{font-size:18px}
.pg-demo .dm-acts .btn{flex:1 1 auto}
.pg-demo .dm-hd .st{margin-left:0}
}
/* dialogs */
.pg-demo .dm-dlg{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:24px;background:#fff;color:var(--g900);box-shadow:var(--shadow-float)}
.pg-demo .dm-dlg.wide{width:min(560px,calc(100vw - 32px))}
.pg-demo .dm-dlg::backdrop{background:rgba(2,12,32,.48)}
.pg-demo .dm-dlg-in{padding:26px 24px 22px}
.pg-demo .dm-dlg h3{margin:14px 0 6px;font-size:21px;line-height:1.4;font-weight:800;letter-spacing:-.02em}
.pg-demo .dm-dlg-in>h3:first-child{margin-top:0}
.pg-demo .dm-dlg-in>p{margin:0 0 14px;font-size:15px;color:var(--g700)}
.pg-demo .dm-dlg-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pg-demo .dm-dlg-acts .btn{flex:1 1 140px;height:52px}
@media (max-width:560px){.pg-demo .dm-dlg{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:24px 24px 0 0}.pg-demo .dm-dlg.wide{width:100vw}}
/* ── visual QA fixes ── */
/* hero mock: side menu labels stayed on one line only when wide enough */
.pg-demo .hv-body{grid-template-columns:148px minmax(0,1fr)}
.pg-demo .hv-side li{white-space:nowrap}
@media (max-width:560px){.pg-demo .hv-body{grid-template-columns:minmax(0,1fr)}}
/* demo menu: count badge sits beside the title, subtitle uses the full width */
.pg-demo .dm-menu [role="tab"]{grid-template-columns:34px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;row-gap:0}
.pg-demo .dm-mi{grid-row:1/3}
.pg-demo .dm-mt{display:contents}
.pg-demo .dm-mt b{grid-column:2;grid-row:1;align-self:end}
.pg-demo .dm-mt small{grid-column:2/4;grid-row:2;align-self:start}
.pg-demo .dm-count{grid-column:3;grid-row:1;justify-self:end;align-self:end}
/* dialog intro rule no longer overrides error and caption text */
.pg-demo .dm-dlg-in>p.dm-err{margin:6px 0 14px;font-size:13px;font-weight:600;color:#c01f2e}
.pg-demo .dm-dlg-in>p.dm-cap{margin:8px 0 0;font-size:12px;color:var(--g600)}
/* toast stays in the viewport even when the demo is taller than the screen */
.pg-demo .dm-toast{position:fixed;bottom:24px;z-index:60;width:max-content;max-width:min(560px,calc(100vw - 32px));text-align:center}
@media (max-width:760px){.pg-demo .dm-toast{bottom:88px}}
/* publish: failure scenarios as a vertical list instead of a 2 + 1 wrap */
.pg-demo .dm-scen .dm-seg{display:grid;grid-template-columns:minmax(0,1fr)}
.pg-demo .dm-scen .dm-seg span{place-items:center start;text-align:left;padding:8px 14px}
/* preview mock: no mid-word breaks */
.pg-demo .dm-pm-foot,.pg-demo .dm-pm li>span:last-child{word-break:keep-all}
/* card footers line up under equal-height descriptions */
.pg-demo .scen .card-foot,.pg-demo #request .cards .card-foot{margin-top:0}
@media (prefers-reduced-motion:reduce){
.pg-demo *,.pg-demo *::before,.pg-demo *::after{animation:none!important;transition:none!important}
.pg-demo .btn[aria-busy="true"]::before{border-right-color:currentColor;opacity:.5}
}