/* A dedicated presentation layout; no editor panel occupies an implicit grid track. */
body[data-entry-mode="demo"] { --demo-ink:#202d43; --demo-muted:#637188; --demo-blue:#345dce; --demo-line:#e0e5ee; background:#f7f9fc; color:var(--demo-ink); }
body[data-entry-mode="demo"] #app,body[data-entry-mode="demo"] #app.panel-left-collapsed,body[data-entry-mode="demo"] #app.panel-right-collapsed { width:100%; height:100dvh; --layout-left:0px; --layout-right:0px; grid-template-columns:minmax(0,1fr) 328px !important; grid-template-rows:68px 68px minmax(0,1fr) 72px !important; grid-template-areas:"demohead demohead" "demosteps demosteps" "stage demoguide" "demofoot demofoot" !important; }
body[data-entry-mode="demo"] #topbar,body[data-entry-mode="demo"] #left,body[data-entry-mode="demo"] #right,body[data-entry-mode="demo"] #bottombar,body[data-entry-mode="demo"] #toolbar,body[data-entry-mode="demo"] #experienceNav,body[data-entry-mode="demo"] .workspace-panel-toggle,body[data-entry-mode="demo"] .resizer,body[data-entry-mode="demo"] #minimap,body[data-entry-mode="demo"] #showcaseReplay,body[data-entry-mode="demo"] #playgroundFollowupLauncher { display:none !important; }
body[data-entry-mode="demo"] #stage { min-width:0; min-height:0; position:relative; overflow:hidden; background-color:#f5f7fb; background-image:radial-gradient(#cfd7e5 1px,transparent 1px); background-size:22px 22px; }
.interactive-demo .demo-header,.interactive-demo .demo-steps,.interactive-demo .demo-guide,.interactive-demo .demo-footer { font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif; color:var(--demo-ink); min-width:0; }
.interactive-demo button,.interactive-demo textarea { font:inherit; }
.interactive-demo .demo-header { grid-area:demohead; display:flex; align-items:center; gap:22px; padding:0 30px; background:#fff; border-bottom:1px solid var(--demo-line); }
.demo-brand { display:inline-flex; align-items:center; gap:10px; font-size:20px; font-weight:750; letter-spacing:-.6px; text-decoration:none; color:var(--demo-ink); }
.demo-brand-mark { display:block; width:21px; height:21px; border:2px solid var(--demo-blue); border-radius:5px; position:relative; }
.demo-brand-mark::after { content:""; position:absolute; width:8px; height:8px; background:var(--demo-blue); top:4px; left:4px; border-radius:1px; }
.demo-header-label { padding-left:22px; border-left:1px solid var(--demo-line); color:var(--demo-muted); font-size:14px; }
.interactive-demo .demo-primary { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 19px; border:1px solid var(--demo-blue); border-radius:8px; color:#fff; background:var(--demo-blue); font-size:15px; font-weight:650; line-height:1.35; text-decoration:none; cursor:pointer; transition:background .18s,transform .18s; }
.interactive-demo .demo-primary:hover { background:#284cab; }
.interactive-demo button:active,.interactive-demo .demo-primary:active { transform:translateY(1px); }
.interactive-demo .demo-start { margin-left:auto; min-height:40px; padding:10px 16px; font-size:14px; }
.interactive-demo .demo-steps { grid-area:demosteps; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:0 30px; background:#fff; border-bottom:1px solid var(--demo-line); }
.interactive-demo .demo-step { display:flex; justify-content:center; align-items:center; gap:10px; min-width:0; padding:12px 8px; background:none; border:0; border-bottom:3px solid transparent; border-radius:0; color:var(--demo-muted); font-size:14px; font-weight:550; cursor:pointer; }
.demo-step-number { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--demo-line); border-radius:50%; font-size:12px; font-variant-numeric:tabular-nums; }
.interactive-demo .demo-step[aria-current="step"] { color:var(--demo-blue); border-bottom-color:var(--demo-blue); }
.demo-step[aria-current="step"] .demo-step-number { background:var(--demo-blue); border-color:var(--demo-blue); color:white; }
.demo-step.is-complete:not([aria-current="step"]) .demo-step-number { background:#eaf1ff; color:var(--demo-blue); border-color:#d6e2fc; }
.interactive-demo .demo-guide { grid-area:demoguide; display:flex; flex-direction:column; align-items:stretch; padding:32px 27px 22px; background:#fff; border-left:1px solid var(--demo-line); overflow:auto; overscroll-behavior:contain; }
.demo-kicker { margin:0 0 19px; color:var(--demo-blue); font-size:12px; font-weight:700; letter-spacing:.09em; }
.demo-title { margin:0; max-width:280px; font-size:29px; font-weight:700; letter-spacing:-.06em; line-height:1.33; word-break:keep-all; text-wrap:balance; }
.demo-description { margin:18px 0 24px; color:var(--demo-muted); font-size:16px; line-height:1.8; word-break:keep-all; }
.demo-memo-label { display:grid; gap:8px; margin-bottom:16px; font-size:13px; font-weight:600; }
.demo-memo { width:100%; resize:vertical; min-height:110px; padding:11px 12px; border:1px solid #bdc9dd; border-radius:6px; font-size:15px !important; font-weight:400; line-height:1.6; color:var(--demo-ink); background:#f9fbff; }
.interactive-demo .demo-action { width:100%; }
.interactive-demo button:disabled { cursor:default; }
.interactive-demo .demo-action:disabled { color:#5372b5; background:#eaf0fc; border-color:#dce5f8; }
.demo-feedback { margin:16px 0 0; font-size:14px; line-height:1.65; color:#315cae; word-break:keep-all; }
.demo-feedback:empty { display:none; }
.demo-source { display:grid; gap:7px; padding:16px 0; margin-top:16px; border-block:1px solid var(--demo-line); }
.demo-source-label { color:var(--demo-muted); font-size:12px; }
.demo-source strong { font-size:16px; }
.demo-source-detail { color:var(--demo-blue); font-size:14px; line-height:1.65; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.demo-hint { font-size:14px; color:var(--demo-muted); line-height:1.7; margin:17px 0; word-break:keep-all; }
.interactive-demo .demo-next { display:flex; align-items:center; justify-content:space-between; border:0; border-top:1px solid var(--demo-line); border-radius:0; background:none; color:var(--demo-ink); padding:17px 0; font-size:15px; font-weight:650; cursor:pointer; }
.demo-next::after { content:"→"; font-size:20px; color:var(--demo-blue); }
.interactive-demo .demo-export { border:1px solid var(--demo-line); border-radius:7px; min-height:44px; padding:10px; font-size:14px; background:#fff; color:var(--demo-ink); cursor:pointer; }
.demo-local-note { margin: auto 0 0; padding-top:25px; color:#748096; font-size:12px; line-height:1.75; word-break:keep-all; }
.interactive-demo .demo-footer { grid-area:demofoot; display:flex; align-items:center; gap:12px; padding:0 30px; background:#fff; border-top:1px solid var(--demo-line); }
.interactive-demo .demo-play { display:inline-flex; align-items:center; gap:9px; border:1px solid #cbd6e9; border-radius:7px; padding:11px 16px; min-height:42px; font-size:14px; font-weight:650; color:var(--demo-blue); background:#fff; cursor:pointer; }
.demo-play::before { content:""; width:0; height:0; border-block:5px solid transparent; border-left:7px solid currentColor; }
.demo-play[aria-pressed="true"]::before { width:7px; height:10px; border-block:0; border-left:2px solid; border-right:2px solid; }
.interactive-demo .demo-restart { border:0; padding:12px; background:none; color:var(--demo-muted); font-size:14px; cursor:pointer; }
.demo-footer-note { color:var(--demo-muted); font-size:13px; margin-left:10px; }
.demo-position { margin-left:auto; font-size:14px; color:var(--demo-muted); font-variant-numeric:tabular-nums; }
.demo-stage-label { position:absolute; top:20px; left:25px; z-index:5; color:#65758e; font:500 13px Pretendard,system-ui,sans-serif; pointer-events:none; }
.demo-stage-tools { position:absolute; bottom:18px; left:22px; z-index:10; display:flex; background:#fff; border:1px solid var(--demo-line); border-radius:7px; overflow:hidden; box-shadow:0 3px 12px #28395508; }
.interactive-demo .demo-stage-tools button { min-width:34px; min-height:34px; padding:8px 12px; color:#52637e; border:0; border-right:1px solid var(--demo-line); border-radius:0; background:#fff; font-size:12px; cursor:pointer; }
.demo-stage-tools button:last-child { border-right:0; }
.demo-loading { position:absolute; inset:0; z-index:15; display:grid; place-content:center; gap:18px; padding:25px; background:#f5f7fb; color:var(--demo-muted); font-size:16px; }
.interactive-demo [hidden] { display:none !important; }
.interactive-demo :is(.demo-header,.demo-steps,.demo-guide,.demo-footer,.demo-stage-tools) :is(button,a,textarea):focus-visible { outline:3px solid #345dce; outline-offset:3px; }
.interactive-demo #stage .card-head { min-height:38px; font-size:15px; }
.interactive-demo #stage .url-memo { font-size:17px; line-height:1.6; }
.interactive-demo #stage .url-link { font-size:15px; }
.interactive-demo #stage .db-table :is(input,select,textarea) { font-size:16px; }
.interactive-demo #stage .db-table th { font-size:14px; }
.interactive-demo #stage .db-calendar-event { font-size:14px; }
@media(min-width:1700px) { body[data-entry-mode="demo"] #app { grid-template-columns:minmax(0,1fr) 380px !important; } .interactive-demo .demo-guide { padding:42px 36px; } .demo-title { font-size:34px; } }
@media(max-width:1050px) and (min-width:760px) { body[data-entry-mode="demo"] #app { grid-template-columns:minmax(0,1fr) 290px !important; } .interactive-demo .demo-guide { padding:25px 22px; } .demo-title { font-size:26px; } .demo-description { font-size:15px; } .demo-step { gap:6px !important; font-size:13px !important; } }
@media(max-width:759px) {
  body[data-entry-mode="demo"] #app,body[data-entry-mode="demo"] #app.panel-left-collapsed,body[data-entry-mode="demo"] #app.panel-right-collapsed { min-height:100dvh; height:auto; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:62px 58px minmax(380px,52dvh) auto 66px !important; grid-template-areas:"demohead" "demosteps" "stage" "demoguide" "demofoot" !important; overflow:visible; }
  body[data-entry-mode="demo"] { overflow:auto; }
  .interactive-demo .demo-header { padding:0 16px; gap:10px; }
  .demo-brand { font-size:18px; gap:7px; }.demo-brand-mark{width:18px;height:18px}.demo-brand-mark::after{width:6px;height:6px;top:4px;left:4px}
  .demo-header-label { display:none; }.interactive-demo .demo-start { padding:9px 11px; min-height:38px; font-size:12px; }
  .interactive-demo .demo-steps { padding:0 8px; }
  .interactive-demo .demo-step { flex-direction:column; gap:5px; padding:7px 0; font-size:10px; line-height:1.3; }
  .demo-step-number { border:0; width:auto; height:auto; border-radius:0; font-size:12px; }.demo-step[aria-current="step"] .demo-step-number { color:var(--demo-blue);background:none; }
  .interactive-demo .demo-guide { padding:24px 22px; border-left:0; border-top:1px solid var(--demo-line); overflow:visible; }
  .demo-kicker { margin-bottom:10px; }.demo-title { max-width:none; font-size:27px; }
  .demo-description { margin:12px 0 18px; font-size:15px; line-height:1.7; }
  .demo-local-note { padding-top:14px; font-size:12px; }.demo-hint{margin:12px 0}
  .interactive-demo .demo-footer { padding:0 16px; gap:6px; }.demo-footer-note{display:none}
  .demo-stage-label { top:12px; left:17px; font-size:12px; }.demo-stage-tools{left:15px;bottom:12px}
  .interactive-demo #stage .db-calendar-event { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .interactive-demo *, .interactive-demo *::before, .interactive-demo *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

body[data-entry-mode="demo"] #quickDock { display:none !important; }

/* Keep off-camera cards from appearing as clipped fragments during a focused lesson. */
body[data-demo-step="connect"] :is([data-id="demo-heading"],[data-id="demo-reference"],[data-id="demo-brief"]),
body[data-demo-step="task"] :is([data-id="demo-calendar"],[data-id="demo-calendar-link"]),
body[data-demo-step="finish"] :is([data-id="demo-calendar"],[data-id="demo-calendar-link"]),
body[data-demo-step="calendar"] :is([data-id="demo-database"],[data-id="demo-calendar-link"]) { visibility:hidden; pointer-events:none; }
.interactive-demo #stage .database-table :is(input,select,textarea),.interactive-demo #stage .database-cell { font-size:14px !important; }
.interactive-demo #stage .database-table th { font-size:13px; }
.interactive-demo #stage .database-event { font-size:14px; }
.interactive-demo #stage :is(.database-day-number,.database-weekday) { font-size:12px; }

@media(max-width:759px) {
  .interactive-demo .demo-steps { grid-template-columns:repeat(5,minmax(132px,1fr)); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .interactive-demo .demo-step { flex-direction:row; gap:7px; font-size:14px; }
  .interactive-demo .demo-step-number { font-size:12px; }
  .interactive-demo .k-calendar .database-calendar { min-width:0; height:auto; display:flex; flex-direction:column; }
  .interactive-demo .k-calendar :is(.database-weekday,.database-day-number,.database-day-add) { display:none; }
  .interactive-demo .k-calendar .database-day:not(:has(.database-event)) { display:none; }
  .interactive-demo .k-calendar .database-day:has(.database-event) { min-height:68px; display:grid; grid-template-columns:103px minmax(0,1fr); align-items:center; gap:8px; padding:12px 9px; }
  .interactive-demo .k-calendar .database-day::before { content:attr(data-db-date); font-size:14px; color:var(--demo-muted); font-variant-numeric:tabular-nums; }
  .interactive-demo #stage .database-event { font-size:14px; padding:8px 7px; }
}