/* 시연 안내 — 앱 위에 뜨는 장면 카드와 누를 곳 테두리. 앱 색(청록) · AIR 색과 겹치지 않게 보라 한 계열만 쓴다. */
:root { --dg: #6d28d9; --dg-h: #5b21b6; --dg-s: #f5f3ff; --dg-b: #ddd6fe; --dg-t: #4c1d95; }

.dg {
  position: fixed; z-index: 620; left: -9999px; top: 8px; width: 380px; max-height: calc(100vh - 16px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--dg-b); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(46, 16, 101, .18), 0 2px 6px rgba(46, 16, 101, .08);
  font-size: 12.5px; color: var(--text-1);
}
.dg[hidden] { display: none; }

.dg-h { display: flex; align-items: center; gap: 7px; padding: 7px 7px 7px 11px; background: var(--dg-s); border-bottom: 1px solid var(--dg-b); cursor: grab; user-select: none; flex-shrink: 0; }
.dg-h:active { cursor: grabbing; }
.dg-h .lg { width: 20px; height: 20px; border-radius: 6px; background: var(--dg); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.dg-h .lg svg { width: 10px; height: 10px; }
.dg-h b { font-size: 12.5px; color: var(--dg-t); white-space: nowrap; }
.dg-h .pt { font-size: 11px; color: var(--dg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dg-h .r { margin-left: auto; display: flex; gap: 1px; flex-shrink: 0; }
.dg-ib { width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--dg-h); display: grid; place-items: center; cursor: pointer; }
.dg-ib:hover { background: #ede9fe; }
.dg-ib.on { background: var(--dg); color: #fff; }
.dg-ib svg { width: 13px; height: 13px; }

.dg-pg { display: flex; gap: 3px; padding: 8px 14px 0; flex-shrink: 0; }
.dg-pg i { flex: 1; height: 4px; border-radius: 2px; background: #ece9f5; cursor: pointer; }
.dg-pg i:hover { background: #ddd6fe; }
.dg-pg i.ok { background: #c4b5fd; }
.dg-pg i.on { background: var(--dg); }

.dg-b { padding: 9px 14px 12px; overflow-y: auto; min-height: 0; }
.dg-no { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.dg-b h3 { font-size: 15px; line-height: 1.45; margin: 0 0 9px; color: var(--text-1); }

.dg-say { background: #faf9ff; border: 1px solid #ece9fb; border-radius: 9px; padding: 8px 10px 9px; margin-bottom: 10px; }
.dg-say.off { padding: 5px 10px; }
.dg-say .lb { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--dg); }
.dg-say .lb button { border: 0; background: none; color: var(--text-3); font-size: 11px; cursor: pointer; padding: 0 2px; }
.dg-say .lb button:hover { color: var(--dg); }
.dg-say p { margin: 5px 0 0; font-size: 13px; line-height: 1.75; color: var(--text-1); }
.dg-say p b { color: var(--dg-t); }

.dg-steps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; }
.dg-steps li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; line-height: 1.5; color: var(--text-2); }
.dg-steps .mk { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: #f1f1f4; color: var(--text-3); margin-top: 1px; }
.dg-steps .mk svg { width: 11px; height: 11px; }
.dg-steps .tx { flex: 1; min-width: 0; }
.dg-steps li.ok { color: var(--text-3); }
.dg-steps li.ok .mk { background: #ede9fe; color: var(--dg); }
.dg-steps li.cur { background: var(--dg-s); color: var(--dg-t); font-weight: 600; box-shadow: inset 0 0 0 1px var(--dg-b); }
.dg-steps li.cur .mk { background: var(--dg); color: #fff; }
.dg-steps .sp { width: 14px; height: 14px; border: 2px solid var(--dg-b); border-top-color: var(--dg); border-radius: 50%; animation: dgs .8s linear infinite; flex-shrink: 0; margin-top: 2px; }

.dg-hint { font-size: 11.5px; line-height: 1.6; color: var(--warning); background: var(--warning-subtle); border-radius: 7px; padding: 6px 9px; margin-bottom: 8px; }
.dg-hint.run { color: var(--dg-t); background: var(--dg-s); }
.dg-hint.ok { color: var(--success); background: var(--success-subtle); }
.dg-look { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.6; color: var(--text-2); padding: 2px 2px 0; }
.dg-look b { flex-shrink: 0; color: var(--text-3); font-weight: 600; }
.dg-mo { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.dg-mo button { border: 1px solid var(--dg-b); background: #fff; color: var(--dg-h); border-radius: 999px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.dg-mo button:hover { background: var(--dg-s); }

.dg-f { display: flex; align-items: center; gap: 6px; padding: 9px 12px 7px; border-top: 1px solid var(--border-1); background: #fcfcfd; flex-shrink: 0; }
.dg-f .grow { flex: 1; }
.dg-f .btn.sm { height: 28px; padding: 0 11px; font-size: 12px; }
.dg-f .btn.primary { background: var(--dg); color: #fff; }
.dg-f .btn.primary:hover:not(:disabled) { background: var(--dg-h); }
.dg-f .btn.primary:disabled { background: var(--bg-subtle); color: var(--text-3); }
.dg-k { padding: 0 12px 7px; background: #fcfcfd; font-size: 10.5px; color: var(--text-3); text-align: right; flex-shrink: 0; }

.dg-list { padding: 10px 12px 12px; }
.dg-lc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.dg-lc button { border: 1px solid var(--border-2); background: #fff; border-radius: 9px; padding: 7px 10px; text-align: left; cursor: pointer; }
.dg-lc button b { display: block; font-size: 12.5px; color: var(--text-1); }
.dg-lc button span { font-size: 11px; color: var(--text-3); }
.dg-lc button.on { border-color: var(--dg); background: var(--dg-s); box-shadow: inset 0 0 0 1px var(--dg); }
.dg-lp { font-size: 10.5px; font-weight: 700; color: var(--dg); margin: 10px 4px 3px; }
.dg-li { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 5px 6px; border-radius: 7px; text-align: left; cursor: pointer; font-size: 12.5px; color: var(--text-1); }
.dg-li:hover { background: var(--bg-hover); }
.dg-li .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: #f1f1f4; color: var(--text-3); flex-shrink: 0; }
.dg-li .n svg { width: 11px; height: 11px; }
.dg-li .t { flex: 1; min-width: 0; }
.dg-li .s { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.dg-li.ok .n { background: #ede9fe; color: var(--dg); }
.dg-li.on { background: var(--dg-s); font-weight: 600; }
.dg-li.on .n { background: var(--dg); color: #fff; }
.dg-lf { margin-top: 10px; padding: 8px 4px 0; border-top: 1px solid var(--border-1); font-size: 11px; color: var(--text-3); line-height: 1.8; }
.dg-lf .mono { color: var(--text-2); }

/* 창이 열려 있을 때 — 지금 단계와 버튼만 한 줄로 */
.dg.compact { width: auto; max-width: calc(100vw - 20px); border-radius: 999px; }
.dg-c { display: flex; align-items: center; gap: 9px; padding: 6px 6px 6px 7px; white-space: nowrap; }
.dg-c .lg { width: 26px; height: 26px; border-radius: 50%; background: var(--dg); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.dg-c .lg svg { width: 10px; height: 10px; }
.dg-c b { color: var(--dg-t); font-size: 12.5px; }
.dg-c .t { display: flex; align-items: center; gap: 7px; min-width: 0; padding-left: 9px; border-left: 1px solid var(--dg-b); font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.dg-c .x { max-width: 440px; overflow: hidden; text-overflow: ellipsis; }
.dg-c .no { width: 18px; height: 18px; border-radius: 50%; background: var(--dg); color: #fff; display: grid; place-items: center; font-size: 10.5px; flex-shrink: 0; }
.dg-c .sp { width: 14px; height: 14px; border: 2px solid var(--dg-b); border-top-color: var(--dg); border-radius: 50%; animation: dgs .8s linear infinite; flex-shrink: 0; }
.dg-c .btn.sm { height: 28px; padding: 0 13px; font-size: 12px; border-radius: 999px; }
.dg-c .btn.primary { background: var(--dg); color: #fff; }
.dg-c .btn.primary:hover:not(:disabled) { background: var(--dg-h); }
.dg-c .btn.primary:disabled { background: var(--bg-subtle); color: var(--text-3); }

.dg-ring {
  position: fixed; z-index: 640; pointer-events: none; border: 2.5px solid var(--dg); border-radius: 10px;
  animation: dgr 1.6s ease-in-out infinite; transition: left .16s ease, top .16s ease, width .16s ease, height .16s ease;
}
.dg-ring[hidden] { display: none; }
.dg-ring b { position: absolute; left: -11px; top: -11px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--dg); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(76, 29, 149, .35); }
.dg-ring b:empty { display: none; }
.dg-ring.spot { border: 2px dashed #a78bfa; border-radius: 12px; animation: none; }
.dg-ring.press { animation: dgp .4s ease-out; }
@keyframes dgr { 0%, 100% { box-shadow: 0 0 0 3px rgba(109, 40, 217, .22); } 50% { box-shadow: 0 0 0 9px rgba(109, 40, 217, .06); } }
@keyframes dgp { 0% { transform: scale(1); } 40% { transform: scale(.94); background: rgba(109, 40, 217, .14); } 100% { transform: scale(1); } }
@keyframes dgs { to { transform: rotate(360deg); } }

.dg-pill {
  position: fixed; z-index: 620; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; max-width: 440px;
  padding: 6px 13px 6px 7px; border-radius: 999px; border: 1px solid var(--dg-b); background: #fff;
  box-shadow: 0 8px 24px rgba(46, 16, 101, .16); cursor: pointer; font-size: 12px; color: var(--text-1);
}
.dg-pill[hidden] { display: none; }
.dg-pill:hover { border-color: #c4b5fd; }
.dg-pill .lg { width: 22px; height: 22px; border-radius: 50%; background: var(--dg); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.dg-pill .lg svg { width: 10px; height: 10px; }
.dg-pill b { color: var(--dg-t); white-space: nowrap; }
.dg-pill .t { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dg-pill .au { font-size: 10px; font-weight: 700; color: #fff; background: var(--dg); border-radius: 999px; padding: 1px 7px; flex-shrink: 0; }

/* 1열 메뉴 · 워크스페이스 진입점 */
.nav-item .kb.on { color: var(--dg); font-weight: 700; }
.ws-demo { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--dg-b); background: linear-gradient(90deg, var(--dg-s), #fff 75%); border-radius: var(--r-10); }
.ws-demo .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--dg); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.ws-demo .ic svg { width: 14px; height: 14px; }
.ws-demo .tx { flex: 1; min-width: 0; }
.ws-demo .tx b { display: block; font-size: 13.5px; color: var(--dg-t); margin-bottom: 2px; }
.ws-demo .tx span { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.ws-demo .bt { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ws-demo .btn.primary { background: var(--dg); color: #fff; }
.ws-demo .btn.primary:hover:not(:disabled) { background: var(--dg-h); }