@charset "utf-8";
/* \c6f9  \ccb4 \d5d8 \d310  \c804 \c6a9 : \c548 \b0b4  \c904  \b7  \c881 \c740  \d654 \ba74  \b300 \c751  */
.demobar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 16px;background:var(--panel2);border-bottom:1px solid var(--line);color:var(--text);font-size:12.5px;line-height:1.4}
.demobar b{background:var(--accent);color:var(--onaccent);border-radius:6px;padding:1px 8px;font-size:12px;white-space:nowrap}
.demobar span{color:var(--muted)}
.demobar .dbtn{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:3px 10px;font-size:12px;cursor:pointer}
.demobar .dbtn:hover{border-color:var(--accent);color:var(--accent2)}
.demobar .dbtn:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* \d0dc \be14 \b9bf  \d3ed (761~1100px): \c591 \cabd  \d328 \b110 \c744  \c870 \ae08  \c881 \ac8c  */
@media (min-width: 761px) and (max-width: 1100px) {
  .layout{grid-template-columns:230px 1fr 280px}
  .layout.noL{grid-template-columns:60px 1fr 280px}.layout.noR{grid-template-columns:230px 1fr 68px}
  .foldL{left:230px}.foldR{right:280px}
  .top .steps{display:none}
}