/* Grid 레이아웃 기반 모달 */
.demo-open{all:unset;background:#1f6feb;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;border:1px solid #1656b5;margin:24px;display:inline-block}

.ki-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:999999}
.ki-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:#111;color:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  width:min(92vw,1024px);height:min(86vh,720px);
  display:grid;grid-template-rows:auto auto 1fr;
  z-index:1000000;overflow:hidden;box-sizing:border-box
}
.ki-modal *{box-sizing:border-box}

/* 툴바 */
.ki-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:8px 10px;background:linear-gradient(180deg,#1c1c1c,#0f0f0f);border-bottom:1px solid #222}
.ki-toolbar .ki-spacer{flex:1; text-align: center; font-size: 20px; font-weight: bolder;}
.ki-toolbar button{all:unset;display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:30px;padding:0 12px;line-height:1;background:#2b2b2b;border:1px solid #3a3a3a;border-radius:8px;color:#fff;cursor:pointer}
.ki-toolbar > .ki-btn-down {background: #fffa99; color: #000000; font-weight: bolder;}
.ki-toolbar button:active{transform:translateY(1px)}
.ki-zoom-label{margin-left:6px;opacity:.85}

/* 탭 */
.ki-tabs{gap:6px;align-items:center;padding:8px 10px;
  border-bottom:1px solid #222;background:linear-gradient(180deg,#151515,#0e0e0e)}
.ki-tab{all:unset;display:inline-flex;align-items:center;justify-content:center;
  height:30px;padding:0 10px;cursor:pointer;background:#242424;border:1px solid #343434;border-radius:8px;color:#ddd}
.ki-tab[aria-selected="true"]{background:#fffa99;color:#000000;border-color:#4a4a4a; font-weight: bolder;}
.ki-tab:active{transform:translateY(1px)}
.ki-modal.ki-has-tabs .ki-tabs{display:flex !important;}

/* 뷰포트 */
.ki-viewport{position:relative;isolation:isolate;min-height:0;background:#000;overflow:hidden;cursor:grab}
.ki-viewport.ki-dragging{cursor:grabbing}
.ki-layer{position:absolute;left:50%;top:50%;width:1200px;height:800px;
  background:#222 center/contain no-repeat;border:1px solid #333;border-radius:12px;
  transform:translate(-50%,-50%) scale(1);transform-origin:center center}
.ki-badge{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55);border:1px solid #2d2d2d;
  padding:4px 8px;border-radius:6px;font-size:12px;z-index:2}