/* ============================================================
   K-MAKER Playground 스타일  — 전부 tokens.css 변수 참조.
   임시 중립 스타일. 시안 반영은 토큰 교체 + 최소 구조 수정으로.
   ============================================================ */
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { font: var(--mk-t-body); color: var(--mk-text-primary); background: var(--mk-background); }
button { font: var(--mk-t-button); cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: var(--mk-t-body-sm); color: var(--mk-text-primary); }

/* ---------- Playground 셸 ---------- */
.pg-shell { display: grid; grid-template-columns: 216px 1fr; height: 100vh; }
.pg-nav { background: var(--mk-surface); border-right: 1px solid var(--mk-border); padding: var(--mk-sp-5) var(--mk-sp-3); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.pg-logo { font: var(--mk-t-h2); padding: var(--mk-sp-2) var(--mk-sp-3) var(--mk-sp-5); }
.pg-logo small { display: block; font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: 2px; }
.pg-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px var(--mk-sp-3); border-radius: var(--mk-r-small); color: var(--mk-text-secondary); text-align: left; }
.pg-nav-item:hover { background: var(--mk-surface-muted); }
.pg-nav-item.on { background: var(--mk-text-primary); color: #fff; }
.pg-nav-item .ico { width: 18px; text-align: center; }
.pg-nav-foot { margin-top: auto; padding: var(--mk-sp-3); font: var(--mk-t-caption); color: var(--mk-text-secondary); border-top: 1px solid var(--mk-border); }

.pg-main { display: flex; flex-direction: column; min-width: 0; }
.pg-head { display: flex; align-items: center; gap: var(--mk-sp-4); padding: var(--mk-sp-4) var(--mk-sp-6); background: var(--mk-surface); border-bottom: 1px solid var(--mk-border); }
.pg-head h1 { font: var(--mk-t-h1); }
.pg-variants { display: flex; gap: 6px; margin-left: auto; }
.pg-variant { padding: 7px 14px; border: 1.5px solid var(--mk-border); border-radius: var(--mk-r-pill); color: var(--mk-text-secondary); background: var(--mk-surface); }
.pg-variant.on { background: var(--mk-text-primary); border-color: var(--mk-text-primary); color: #fff; }
.pg-body { flex: 1; overflow: auto; padding: var(--mk-sp-6); }
.pg-body.flush { padding: 0; display: flex; }

.pg-note { font: var(--mk-t-caption); color: var(--mk-text-secondary); background: var(--mk-cream); border: 1px dashed var(--mk-border); border-radius: var(--mk-r-small); padding: 8px 12px; margin-bottom: var(--mk-sp-5); display: inline-block; }

/* ---------- Foundations: 라이브 스타일 가이드 ---------- */
.fd-bar { display: flex; align-items: center; gap: var(--mk-sp-3); margin-bottom: var(--mk-sp-5); }
.fd-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(520px, 48%); gap: var(--mk-sp-6); align-items: start; }
.fd-controls { min-width: 0; }
.fd-group { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5); margin-bottom: var(--mk-sp-4); }
.fd-group-t { font: var(--mk-t-h3); margin-bottom: var(--mk-sp-4); }
.fd-group-t small { color: var(--mk-text-secondary); font-weight: 400; margin-left: 6px; }
.fd-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.fd-row .lab { font: var(--mk-t-body-sm); display: flex; align-items: center; gap: 6px; }
.fd-row code { font-size: 11px; color: var(--mk-text-secondary); margin-left: auto; }
.fd-row input[type=color] { width: 40px; height: 30px; border: 1px solid var(--mk-border); border-radius: 6px; padding: 2px; background: var(--mk-surface); cursor: pointer; }
.fd-row input[type=range] { width: 170px; accent-color: var(--mk-teal); }
.fd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mk-coral); display: inline-block; visibility: hidden; }
.fd-sp-demo { display: flex; gap: 6px; align-items: flex-end; margin-top: 4px; }
.fd-sp-demo i { height: 18px; background: var(--mk-teal-soft); border-radius: 3px; display: inline-block; transition: width .15s; }
.fd-preview { position: sticky; top: 0; z-index: var(--mk-z-panel); background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-large); box-shadow: var(--mk-sh-subtle); max-height: calc(100vh - 140px); display: flex; flex-direction: column; overflow: hidden; }
.fd-pv-head { display: flex; justify-content: space-between; align-items: center; padding: var(--mk-sp-4) var(--mk-sp-5); border-bottom: 1px solid var(--mk-border); font: var(--mk-t-h3); }
.fd-pv-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--mk-border); background: var(--mk-surface); }
.fd-pv-tab { padding: 8px 12px; font: var(--mk-t-button); color: var(--mk-text-secondary); border-radius: 7px 7px 0 0; border-bottom: 2px solid transparent; }
.fd-pv-tab.on { color: var(--mk-text-primary); border-bottom-color: var(--mk-coral); }
.fd-pv-body { padding: var(--mk-sp-5); overflow-y: auto; }
.fd-frame { border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); overflow: hidden; background: var(--mk-background); position: relative; min-height: 120px; }
.fd-frame-in { transform-origin: 0 0; pointer-events: none; }
.fd-frame-cap { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin: 8px 2px 0; display: flex; justify-content: space-between; }
.fd-hex { width: 82px; height: 30px; border: 1px solid var(--mk-border); border-radius: 6px; padding: 0 8px; font-family: monospace; font-size: 12px; background: var(--mk-surface); }
.fd-hex:focus { outline: none; border-color: var(--mk-text-primary); }
.fd-num { width: 58px; height: 30px; border: 1px solid var(--mk-border); border-radius: 6px; padding: 0 6px; font-size: 12.5px; background: var(--mk-surface); }
.fd-sel { height: 30px; border: 1px solid var(--mk-border); border-radius: 6px; background: var(--mk-surface); font-size: 12px; padding: 0 4px; }
.fd-unit { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-left: -6px; }
.fd-val { font: var(--mk-t-caption); min-width: 36px; }
.fd-type-row { justify-content: flex-start; }
.fd-type-label { min-width: 118px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-pv-sec { margin-bottom: var(--mk-sp-6); }
.fd-pv-sec > small { display: block; font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .4px; }

/* ---------- 프리미티브 확장 (Components Gallery용 중립 스타일) ---------- */
.mk-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: mkspin .7s linear infinite; display: inline-block; }
.mk-spin.dark { border-color: var(--mk-border); border-top-color: var(--mk-text-primary); }
.mk-spin.lg { width: 26px; height: 26px; border-width: 3px; }
@keyframes mkspin { to { transform: rotate(360deg); } }
.mk-input.error { border-color: var(--mk-danger); }
.mk-field label { display: block; font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-bottom: 5px; }
.mk-field .err { font: var(--mk-t-caption); color: var(--mk-danger); margin-top: 4px; display: block; }
textarea.mk-input { height: auto; min-height: 76px; padding: 9px 12px; resize: vertical; }
select.mk-input { padding-right: 8px; }
.mk-check, .mk-radio { display: inline-flex; align-items: center; gap: 8px; font: var(--mk-t-body-sm); cursor: pointer; }
.mk-check input, .mk-radio input { width: 16px; height: 16px; accent-color: var(--mk-teal); margin: 0; }
.mk-switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.mk-switch input { opacity: 0; width: 0; height: 0; }
.mk-switch i { position: absolute; inset: 0; background: var(--mk-border); border-radius: var(--mk-r-pill); transition: .15s; }
.mk-switch i::after { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: var(--mk-sh-subtle); }
.mk-switch input:checked + i { background: var(--mk-teal); }
.mk-switch input:checked + i::after { transform: translateX(16px); }
.mk-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mk-teal-soft); color: var(--mk-teal); display: inline-flex; align-items: center; justify-content: center; font: var(--mk-t-button); flex: none; }
.mk-avatar.coral { background: var(--mk-coral-soft); color: var(--mk-coral); }
.mk-avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.mk-avatar.lg { width: 52px; height: 52px; font-size: 17px; }
.mk-avatar-stack { display: inline-flex; }
.mk-avatar-stack .mk-avatar { border: 2px solid var(--mk-surface); margin-left: -8px; }
.mk-avatar-stack .mk-avatar:first-child { margin-left: 0; }
.mk-toast { display: inline-flex; align-items: center; gap: 10px; background: var(--mk-text-primary); color: #fff; border-radius: var(--mk-r-medium); padding: 11px 16px; font: var(--mk-t-body-sm); box-shadow: var(--mk-sh-floating); }
.mk-toast.success { background: var(--mk-success); }
.mk-toast.danger { background: var(--mk-danger); }
.mk-skel { background: linear-gradient(90deg, var(--mk-surface-muted) 25%, #E8EBF1 50%, var(--mk-surface-muted) 75%); background-size: 200% 100%; animation: mkskel 1.2s infinite; border-radius: 6px; }
@keyframes mkskel { to { background-position: -200% 0; } }
.mk-aibox { background: var(--mk-surface); border: 1.5px solid var(--mk-teal); border-radius: var(--mk-r-large); padding: var(--mk-sp-4); max-width: 520px; box-shadow: var(--mk-sh-subtle); }
.mk-aibox textarea { border: none; width: 100%; min-height: 56px; resize: none; font: var(--mk-t-body); padding: 2px; }
.mk-aibox textarea:focus { outline: none; }
.mk-aibox .foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mk-topnav { display: flex; align-items: center; gap: var(--mk-sp-5); background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: 10px var(--mk-sp-5); }
.mk-topnav .brand { font: var(--mk-t-h3); }
.mk-topnav a { font: var(--mk-t-body-sm); color: var(--mk-text-secondary); text-decoration: none; }
.mk-topnav a.on { color: var(--mk-text-primary); font-weight: 700; }

/* ---------- Components Gallery 레이아웃 ---------- */
.cg-layout { display: grid; grid-template-columns: 196px 1fr; gap: var(--mk-sp-6); align-items: start; }
.cg-nav { position: sticky; top: 0; max-height: calc(100vh - 130px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.cg-nav .grp { font: var(--mk-t-caption); color: var(--mk-text-secondary); text-transform: uppercase; letter-spacing: .5px; margin: 12px 4px 5px; }
.cg-nav .grp:first-child { margin-top: 0; }
.cg-nav button { text-align: left; padding: 7px 11px; border-radius: var(--mk-r-small); color: var(--mk-text-secondary); font: var(--mk-t-body-sm); }
.cg-nav button.on { background: var(--mk-text-primary); color: #fff; }
.cg-main { min-width: 0; display: flex; flex-direction: column; gap: var(--mk-sp-4); }
.cg-controls { display: flex; flex-wrap: wrap; gap: var(--mk-sp-5); background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-3) var(--mk-sp-4); align-items: center; }
.cg-ctl { display: flex; align-items: center; gap: 7px; }
.cg-ctl > small { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.cg-ctl .seg { display: flex; background: var(--mk-surface-muted); border-radius: var(--mk-r-small); padding: 2px; }
.cg-ctl .seg button { padding: 5px 10px; border-radius: 5px; font: var(--mk-t-caption); font-weight: 600; color: var(--mk-text-secondary); }
.cg-ctl .seg button.on { background: var(--mk-surface); color: var(--mk-text-primary); box-shadow: var(--mk-sh-subtle); }
.cg-stage { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-large); padding: var(--mk-sp-6); }
.cg-stage-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--mk-sp-5); }
.cg-stage-h b { font: var(--mk-t-h1); }
.cg-stage-h small { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.cg-sec { margin-bottom: var(--mk-sp-6); }
.cg-sec:last-child { margin-bottom: 0; }
.cg-sec > small { display: block; font: var(--mk-t-caption); color: var(--mk-text-secondary); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }
.cg-row { display: flex; flex-wrap: wrap; gap: var(--mk-sp-4); align-items: center; }
.cg-item { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cg-item > small { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.cg-spec { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-large); padding: var(--mk-sp-6); display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: var(--mk-sp-6); }
.cg-spec h4 { font: var(--mk-t-h3); margin-bottom: var(--mk-sp-3); }
.cg-spec .tok { display: inline-block; font-family: monospace; font-size: 11px; background: var(--mk-surface-muted); border-radius: 5px; padding: 3px 7px; margin: 0 4px 6px 0; color: var(--mk-text-secondary); }
.cg-spec pre { background: var(--mk-surface-muted); border-radius: var(--mk-r-small); padding: 10px 12px; font-size: 11.5px; overflow-x: auto; white-space: pre-wrap; }
.cg-dd { display: flex; flex-direction: column; gap: 7px; }
.cg-dd .do, .cg-dd .dont { font: var(--mk-t-body-sm); display: flex; gap: 8px; }
.cg-dd .do::before { content: '✓'; color: var(--mk-success); font-weight: 700; }
.cg-dd .dont::before { content: '✗'; color: var(--mk-danger); font-weight: 700; }
/* ---------- Gallery 3단 (Figma Component 페이지형) ---------- */
.cg2-layout { display: grid; grid-template-columns: 168px minmax(0, 1fr) 300px; gap: var(--mk-sp-5); align-items: start; }
.cg2-mid { min-width: 0; display: flex; flex-direction: column; gap: var(--mk-sp-4); }
.cg-insp { position: sticky; top: 0; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-large); max-height: calc(100vh - 130px); overflow-y: auto; }
.cg-insp-h { padding: var(--mk-sp-4) var(--mk-sp-5); border-bottom: 1px solid var(--mk-border); font: var(--mk-t-h3); display: flex; justify-content: space-between; align-items: center; }
.cg-insp-b { padding: var(--mk-sp-5); }
.cg-insp h4 { font: var(--mk-t-caption); color: var(--mk-text-secondary); text-transform: uppercase; letter-spacing: .5px; margin: var(--mk-sp-5) 0 8px; }
.cg-insp h4:first-child { margin-top: 0; }
.cg-insp p { font: var(--mk-t-body-sm); }
.cg-insp .kv { display: flex; justify-content: space-between; gap: 10px; font: var(--mk-t-body-sm); padding: 5px 0; border-bottom: 1px dashed var(--mk-border); }
.cg-insp .kv:last-child { border-bottom: none; }
.cg-insp .kv small { color: var(--mk-text-secondary); flex: none; }
.cg-insp .kv b { font-weight: 600; text-align: right; font-size: 12px; }
.cmp-sub { font: var(--mk-t-h2); margin: var(--mk-sp-6) 0 var(--mk-sp-4); padding-bottom: 8px; border-bottom: 1px solid var(--mk-border); display: flex; align-items: baseline; gap: 8px; }
.cmp-sub:first-of-type { margin-top: 0; }
.cmp-sub small { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.mk-divider { height: 1px; background: var(--mk-border); border: none; width: 100%; }
.mk-panel { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); }
.mk-panel .ph { padding: 10px 14px; border-bottom: 1px solid var(--mk-border); font: var(--mk-t-h3); }
.mk-panel .pb { padding: 14px; font: var(--mk-t-body-sm); color: var(--mk-text-secondary); }
@media (max-width: 1240px) { .cg2-layout { grid-template-columns: 150px 1fr; } .cg-insp { position: static; max-height: none; grid-column: 1 / -1; } }

/* 전역 상태 오버라이드 (컨트롤바) + 개별 시뮬(.sim-*) */
.cg-hover .mk-tplcard, .sim-hover .mk-tplcard { box-shadow: var(--mk-sh-floating); transform: translateY(-2px); }
.cg-hover .mk-iconbtn, .sim-hover .mk-iconbtn { background: var(--mk-surface-muted); color: var(--mk-text-primary); }
.cg-focus .mk-input, .cg-focus .mk-chip, .sim-focus .mk-input { outline: 2px solid var(--mk-teal); outline-offset: 2px; }
.cg-disabled .cg-sec { opacity: .45; pointer-events: none; }
.sim-disabled { opacity: .45; pointer-events: none; display: inline-flex; }
/* Button 매트릭스 */
.btn-matrix { display: grid; grid-template-columns: 84px repeat(var(--bm-cols, 6), auto); gap: 12px 16px; align-items: center; justify-content: start; margin-top: 10px; overflow-x: auto; padding-bottom: 6px; }
.btn-matrix > small { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.btn-matrix > small.rowh { font-weight: 700; color: var(--mk-text-primary); }
/* Density 오버라이드 */
.cg-dense .cg-row { gap: var(--mk-sp-2); }
.cg-dense .cg-sec { margin-bottom: var(--mk-sp-4); }
.cg-dense .mk-card { padding: 12px; }
.cg-dense .mk-btn { height: var(--mkb-h-sm); padding: var(--mkb-pad-sm); }
.cg-relax .cg-row { gap: var(--mk-sp-7); }
.cg-relax .cg-sec { margin-bottom: var(--mk-sp-8); }
.cg-relax .mk-card { padding: 28px; }
/* Card 변형 (갤러리 검토용) */
.mk-card.outlined { box-shadow: none; border: 1.5px solid var(--mk-text-secondary); }
.mk-card.elevated { border: none; box-shadow: var(--mk-sh-floating); }
.mk-card.interactive { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.mk-card.interactive:hover, .sim-hover .mk-card.interactive { box-shadow: var(--mk-sh-floating); transform: translateY(-2px); }
.mk-card.selected { border: 2px solid var(--mk-coral); box-shadow: 0 0 0 3px var(--mk-coral-soft); }
/* 전역 크기 오버라이드 */
.cg-sm .mk-btn { height: var(--mkb-h-sm); padding: var(--mkb-pad-sm); font-size: var(--mkb-fs-sm); }
.cg-sm .mk-input { height: 32px; font-size: 12.5px; }
.cg-lg .mk-btn { height: var(--mkb-h-lg); padding: var(--mkb-pad-lg); font-size: var(--mkb-fs-lg); }
.cg-lg .mk-input { height: 42px; font-size: 15px; }

/* ---------- 내비 구분선 ---------- */
.pg-nav-div { height: 1px; background: var(--mk-border); margin: 10px 6px; flex: none; }

/* ---------- Components Gallery (컴포넌트별 독립 관리) ---------- */
.cmp-layout { display: grid; grid-template-columns: 190px 1fr; gap: var(--mk-sp-6); align-items: start; }
.cmp-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; }
.cmp-nav button { text-align: left; padding: 9px 12px; border-radius: var(--mk-r-small); color: var(--mk-text-secondary); font: var(--mk-t-body-sm); }
.cmp-nav button.on { background: var(--mk-text-primary); color: #fff; }
.cmp-stage { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-large); padding: var(--mk-sp-6); min-height: 420px; }
.cmp-stage-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--mk-sp-5); padding-bottom: var(--mk-sp-4); border-bottom: 1px solid var(--mk-border); }
.cmp-stage-h b { font: var(--mk-t-h1); }
.cmp-stage-h small { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.cmp-sec { margin-bottom: var(--mk-sp-6); }
.cmp-sec > small { display: block; font: var(--mk-t-caption); color: var(--mk-text-secondary); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }
.cmp-row { display: flex; flex-wrap: wrap; gap: var(--mk-sp-3); align-items: center; }
.mk-badge { display: inline-flex; align-items: center; font: var(--mk-t-caption); font-weight: 600; padding: 3px 9px; border-radius: var(--mk-r-pill); background: var(--mk-surface-muted); color: var(--mk-text-secondary); }
.mk-badge.coral { background: var(--mk-coral-soft); color: var(--mk-coral); }
.mk-badge.teal { background: var(--mk-teal-soft); color: var(--mk-teal); }
.mk-badge.success { background: #E4F4EA; color: var(--mk-success); }
.mk-badge.danger { background: #FBE7E5; color: var(--mk-danger); }

/* ---------- 스펙시먼 (Foundations/Components 진열) ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--mk-sp-5); }
.spec { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5); }
.spec-name { font: var(--mk-t-h3); margin-bottom: var(--mk-sp-4); display: flex; justify-content: space-between; }
.spec-name code { font-size: 11px; color: var(--mk-text-secondary); font-weight: 400; }
.spec-row { display: flex; flex-wrap: wrap; gap: var(--mk-sp-3); align-items: center; margin-bottom: var(--mk-sp-3); }
.swatch { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.swatch .chip { width: 44px; height: 32px; border-radius: var(--mk-r-small); border: 1px solid var(--mk-border); }
.swatch .lab { font: var(--mk-t-body-sm); } .swatch .val { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-left: auto; }
.sp-bar { background: var(--mk-teal-soft); height: 18px; border-radius: 3px; }
.type-item { margin-bottom: var(--mk-sp-3); }
.type-item small { font: var(--mk-t-caption); color: var(--mk-text-secondary); display: block; }

/* ---------- 공통 컴포넌트 (Maker*) ---------- */
.mk-iconbtn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--mk-r-small); color: var(--mk-text-secondary); }
.mk-iconbtn:hover { background: var(--mk-surface-muted); color: var(--mk-text-primary); }
.mk-iconbtn.on { background: var(--mk-teal-soft); color: var(--mk-teal); }
.mk-input { width: 100%; height: 36px; padding: 0 12px; border: 1.5px solid var(--mk-border); border-radius: var(--mk-r-small); background: var(--mk-surface); }
.mk-input:focus { outline: none; border-color: var(--mk-text-primary); }
.mk-tabs { display: flex; gap: 2px; background: var(--mk-surface-muted); border-radius: var(--mk-r-small); padding: 3px; }
.mk-tab { flex: 1; padding: 7px 14px; border-radius: 5px; color: var(--mk-text-secondary); text-align: center; }
.mk-tab.on { background: var(--mk-surface); color: var(--mk-text-primary); box-shadow: var(--mk-sh-subtle); }
.mk-chip { padding: 6px 13px; border: 1.5px solid var(--mk-border); border-radius: var(--mk-r-pill); background: var(--mk-surface); color: var(--mk-text-secondary); font: var(--mk-t-button); }
.mk-chip.on { background: var(--mk-text-primary); border-color: var(--mk-text-primary); color: #fff; }
.mk-card { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5); box-shadow: var(--mk-sh-subtle); }
.mk-tooltip { position: relative; }
.mk-tooltip:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--mk-text-primary); color: #fff; font: var(--mk-t-caption); padding: 5px 9px; border-radius: 5px; white-space: nowrap; z-index: var(--mk-z-tooltip); }
.mk-dropdown { position: relative; display: inline-block; }
.mk-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-small); box-shadow: var(--mk-sh-floating); padding: 4px; z-index: var(--mk-z-dropdown); display: none; }
.mk-dropdown.open .mk-dropdown-menu { display: block; }
.mk-dropdown-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 5px; font: var(--mk-t-body-sm); }
.mk-dropdown-menu button:hover { background: var(--mk-surface-muted); }
.mk-modal-back { position: fixed; inset: 0; background: rgba(18, 24, 33, .45); display: flex; align-items: center; justify-content: center; z-index: var(--mk-z-modal); }
.mk-modal { background: var(--mk-surface); border-radius: var(--mk-r-large); box-shadow: var(--mk-sh-modal); width: min(560px, 92vw); padding: var(--mk-sp-6); }
.mk-modal h2 { font: var(--mk-t-h2); margin-bottom: var(--mk-sp-3); }

/* 템플릿 카드 */
.mk-tplcard { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); overflow: hidden; text-align: left; transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; }
.mk-tplcard:hover { box-shadow: var(--mk-sh-floating); transform: translateY(-2px); }
.mk-tplcard .thumb { aspect-ratio: 16/10; background: var(--mk-surface-muted); display: flex; align-items: center; justify-content: center; position: relative; }
.mk-tplcard .thumb svg { max-width: 82%; max-height: 82%; box-shadow: var(--mk-sh-subtle); }
.mk-tplcard .thumb .type { position: absolute; top: 10px; left: 10px; font: var(--mk-t-caption); background: rgba(31, 39, 51, .82); color: #fff; padding: 3px 8px; border-radius: var(--mk-r-pill); }
.mk-tplcard .thumb .fav { position: absolute; top: 8px; right: 10px; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.mk-tplcard .thumb .fav.on { color: #FFC94D; }
.mk-tplcard .meta .diff { display: inline-block; font: var(--mk-t-caption); font-weight: 600; background: var(--mk-teal-soft); color: var(--mk-teal); border-radius: var(--mk-r-pill); padding: 1px 7px; margin-left: 5px; vertical-align: 1px; }
.mk-tplcard .meta { padding: 12px 14px 14px; }
.mk-tplcard .meta b { font: var(--mk-t-h3); display: block; }
.mk-tplcard .meta small { font: var(--mk-t-caption); color: var(--mk-text-secondary); }

/* 씬 카드 */
.mk-scenecard { width: 122px; flex: none; text-align: left; }
.mk-scenecard .frame { aspect-ratio: 16/9; width: 100%; border: 2px solid var(--mk-border); border-radius: var(--mk-r-small); background: var(--mk-surface); overflow: hidden; position: relative; cursor: pointer;
  transition: border-color var(--mk-mo-fast) var(--mk-mo-ease), box-shadow var(--mk-mo-fast) var(--mk-mo-ease), transform var(--mk-mo-fast) var(--mk-mo-ease); }
.mk-scenecard .frame:hover { border-color: #C4CBD6; box-shadow: var(--mk-sh-subtle); transform: translateY(-1px); }
.mk-scenecard.on .frame { border-color: var(--mk-coral); box-shadow: 0 0 0 2px var(--mk-coral-soft), var(--mk-sh-subtle); transform: translateY(-1px); }
.mk-scenecard .num { position: absolute; top: 4px; left: 4px; font: var(--mk-t-caption); font-weight: 700; color: var(--mk-text-secondary); background: rgba(255, 255, 255, .85); border-radius: 4px; padding: 0 5px; line-height: 16px; }
.mk-scenecard.on .num { background: var(--mk-coral); color: #fff; }
.mk-scenecard .dur { position: absolute; bottom: 4px; right: 4px; font: var(--mk-t-caption); font-weight: 600; background: rgba(31, 39, 51, .66); color: #fff; border-radius: 4px; padding: 1px 6px; backdrop-filter: blur(2px); }
.mk-scenecard .playing { position: absolute; top: 4px; right: 6px; font-size: 10px; color: var(--mk-teal); }
.mk-scenecard.active .frame { border-color: var(--mk-teal); box-shadow: 0 0 0 2px var(--mk-teal-soft); }
.mk-scenecard .nm { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: 5px; display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-scenecard.on .nm { color: var(--mk-text-primary); font-weight: 600; }

/* ---------- Create Flow ---------- */
.cf { max-width: 1080px; margin: 0 auto; }
.cf-steps { display: flex; align-items: center; gap: 10px; margin-bottom: var(--mk-sp-7); flex-wrap: wrap; }
.cf-step { display: inline-flex; align-items: center; gap: 8px; font: var(--mk-t-body-sm); font-weight: 600; color: var(--mk-text-secondary); padding: 7px 12px; border-radius: var(--mk-r-pill); }
.cf-step i { width: 20px; height: 20px; border-radius: 50%; background: var(--mk-surface-muted); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; }
.cf-step.on { color: var(--mk-text-primary); background: var(--mk-surface); box-shadow: var(--mk-sh-subtle); border: 1px solid var(--mk-border); }
.cf-step.on i { background: var(--mk-text-primary); color: #fff; }
.cf-step.done { color: var(--mk-teal); cursor: pointer; }
.cf-step.done i { background: var(--mk-teal-soft); color: var(--mk-teal); }
.cf-step:disabled { cursor: default; }
.cf-step small { font: var(--mk-t-caption); color: var(--mk-text-secondary); font-weight: 400; }
.cf-arrow { color: var(--mk-border); }
.cf-head { text-align: center; padding: var(--mk-sp-5) 0 var(--mk-sp-7); }
.cf-head h2 { font: var(--mk-t-display); font-size: 28px; }
.cf-head p { font: var(--mk-t-body); color: var(--mk-text-secondary); margin-top: 8px; }
.cf-types { max-width: 900px; margin: 0 auto; }
.cf-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--mk-sp-4); max-width: 900px; margin: 0 auto; }
.cf-style { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5); text-align: left; transition: box-shadow .15s, transform .15s; }
.cf-style:hover { box-shadow: var(--mk-sh-floating); transform: translateY(-2px); }
.cf-style .sw { display: block; height: 46px; border-radius: var(--mk-r-small); margin-bottom: 12px; background: var(--mk-surface-muted); }
.cf-style b { font: var(--mk-t-h3); display: block; }
.cf-style small { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: 3px; display: block; }
/* 스타일 스와치 힌트 (중립 톤 유지, 시안 전 임시) */
.sw-modern { background: linear-gradient(135deg, #E9EDF3 55%, #1F2733 55%); }
.sw-minimal { background: #FAFBFC; border: 1px solid var(--mk-border); }
.sw-premium { background: linear-gradient(135deg, #2A3140, #3D4658); }
.sw-kids { background: linear-gradient(135deg, #FBE9E4 50%, #E3F1EE 50%); }
.sw-magazine { background: repeating-linear-gradient(0deg, #F0F2F5 0 8px, #fff 8px 16px); }
.sw-science { background: radial-gradient(circle at 30% 40%, #E3F1EE 22%, transparent 23%), radial-gradient(circle at 70% 60%, #E9EDF3 22%, transparent 23%), #FAFBFC; }
.sw-creative { background: conic-gradient(from 40deg, #FBE9E4, #F8F3E9, #E3F1EE, #FBE9E4); }
.cf-tplwrap { position: relative; display: block; }
.cf-recent { position: absolute; top: -8px; left: 10px; z-index: 2; font: var(--mk-t-caption); font-weight: 700; background: var(--mk-teal); color: #fff; border-radius: var(--mk-r-pill); padding: 3px 9px; box-shadow: var(--mk-sh-subtle); }
.cf-pv { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--mk-sp-7); align-items: start; }
.cf-pv-big { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); overflow: hidden; box-shadow: var(--mk-sh-subtle); max-height: 62vh; display: flex; justify-content: center; }
.cf-pv-big svg { width: 100%; height: 100%; }
.cf-pv-strip { display: flex; gap: 12px; overflow-x: auto; margin-top: var(--mk-sp-4); padding-bottom: 6px; }
.cf-pv-side h2 { font: var(--mk-t-h1); }
.cf-pv-side .kvs { margin: var(--mk-sp-5) 0; }
.cf-pv-side .kv { display: flex; justify-content: space-between; gap: 12px; font: var(--mk-t-body-sm); padding: 9px 0; border-bottom: 1px dashed var(--mk-border); }
.cf-pv-side .kv small { color: var(--mk-text-secondary); flex: none; }
.cf-pv-side .kv b { font-weight: 600; text-align: right; }
.cf-pv-cta { margin-top: var(--mk-sp-6); }
@media (max-width: 1000px) { .cf-pv { grid-template-columns: 1fr; } }

/* ---------- Home v1 ---------- */
.hv { max-width: 1080px; margin: 0 auto; }
.hv-header { display: flex; align-items: center; gap: var(--mk-sp-5); padding: var(--mk-sp-2) 0 var(--mk-sp-6); }
.hv-logo { font: var(--mk-t-h2); letter-spacing: .2px; }
.hv-search { flex: 1; max-width: 340px; }
.hv-search .mk-input { height: 34px; border-radius: var(--mk-r-pill); background: var(--mk-surface-muted); border-color: transparent; }
.hv-nav { display: flex; gap: var(--mk-sp-5); margin-left: auto; }
.hv-nav a { font: var(--mk-t-body-sm); color: var(--mk-text-secondary); cursor: pointer; }
.hv-nav a:hover { color: var(--mk-text-primary); }
.hv-bell { position: relative; }
.hv-bell i { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--mk-coral); }
.hv-hero { text-align: center; padding: var(--mk-sp-9) 0 var(--mk-sp-8); }
.hv-hero h2 { font: var(--mk-t-display); font-size: 34px; }
.hv-hero p { font: var(--mk-t-body); color: var(--mk-text-secondary); margin: var(--mk-sp-3) 0 var(--mk-sp-6); }
.hv-aibox { max-width: 640px; margin: 0 auto; text-align: left; }
.hv-aibox .foot { flex-wrap: wrap; }
.hv-sec-t { display: flex; align-items: baseline; justify-content: space-between; margin: var(--mk-sp-9) 0 var(--mk-sp-5); }
.hv-sec-t b { font: var(--mk-t-h1); }
.hv-more { font: var(--mk-t-body-sm); color: var(--mk-text-secondary); }
.hv-more:hover { color: var(--mk-text-primary); }
.hv-start { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mk-sp-4); }
.hv-type { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-6) var(--mk-sp-4); text-align: center; transition: box-shadow .15s, transform .15s; }
.hv-type:hover { box-shadow: var(--mk-sh-floating); transform: translateY(-2px); }
.hv-type .ico { font-size: 28px; display: block; margin-bottom: 12px; }
.hv-type b { font: var(--mk-t-h3); display: block; }
.hv-type small { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: 4px; display: block; }
.hv-scroll { display: flex; gap: var(--mk-sp-4); overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; }
.hv-scroll-item { flex: 0 0 220px; scroll-snap-align: start; }
.hv-recent { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mk-sp-4); }
.hv-recent-item { display: flex; flex-direction: column; text-align: left; background: none; border: none; padding: 0; }
.hv-recent-item .mini { width: 100%; aspect-ratio: 16/10; background: var(--mk-surface-muted); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); transition: box-shadow .15s; }
.hv-recent-item:hover .mini { box-shadow: var(--mk-sh-floating); }
.hv-recent-item .tx { padding: 10px 2px 0; }
.hv-recent-item b { font: var(--mk-t-h3); display: block; }
.hv-recent-item small { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.hv-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mk-sp-4); }
.hv-pick { text-align: left; background: var(--mk-surface); border: 1px dashed var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5); transition: border-color .15s, box-shadow .15s; }
.hv-pick:hover { border-style: solid; box-shadow: var(--mk-sh-subtle); }
.hv-pick .why { font: var(--mk-t-caption); color: var(--mk-teal); display: block; margin-bottom: 8px; }
.hv-pick .what { display: flex; align-items: center; gap: 10px; }
.hv-pick .what .ico { font-size: 20px; }
.hv-pick .what b { font: var(--mk-t-h3); }
.hv-pick .cta { font: var(--mk-t-caption); color: var(--mk-text-secondary); display: block; margin-top: 10px; }
.hv-foot-note { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: var(--mk-sp-5); }
@media (max-width: 1100px) { .hv-start, .hv-recent { grid-template-columns: repeat(2, 1fr); } .hv-picks { grid-template-columns: 1fr; } }

/* ---------- Home (구 A/B/C 잔존 스타일) ---------- */
.home-hero { text-align: center; padding: var(--mk-sp-9) 0 var(--mk-sp-7); }
.home-hero h2 { font: var(--mk-t-display); }
.home-hero p { color: var(--mk-text-secondary); margin-top: var(--mk-sp-2); }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--mk-sp-4); max-width: 860px; margin: 0 auto; }
.home-type { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5) var(--mk-sp-3); text-align: center; transition: box-shadow .15s, transform .15s; }
.home-type:hover { box-shadow: var(--mk-sh-floating); transform: translateY(-2px); }
.home-type .ico { font-size: 26px; display: block; margin-bottom: 10px; }
.home-type b { font: var(--mk-t-h3); }
.home-type small { display: block; font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: 3px; }
.home-type.ai { border: 1.5px dashed var(--mk-teal); background: var(--mk-teal-soft); }
.home-split { display: grid; grid-template-columns: 1fr 340px; gap: var(--mk-sp-6); align-items: start; }
.home-recent { display: flex; flex-direction: column; gap: var(--mk-sp-3); }
.home-recent-item { display: flex; gap: 12px; align-items: center; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: 10px 14px; text-align: left; }
.home-recent-item .mini { width: 56px; aspect-ratio: 16/10; background: var(--mk-surface-muted); border-radius: 5px; flex: none; }
.home-searchwrap { max-width: 620px; margin: 0 auto var(--mk-sp-6); }
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---------- Template Browser ---------- */
.br-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--mk-sp-5); align-items: center; }
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: var(--mk-sp-4); }
.br-layout { display: grid; grid-template-columns: 200px 1fr; gap: var(--mk-sp-6); align-items: start; }
.br-side { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.br-side button { text-align: left; padding: 8px 11px; border-radius: var(--mk-r-small); color: var(--mk-text-secondary); }
.br-side button.on { background: var(--mk-text-primary); color: #fff; }
.br-empty { color: var(--mk-text-secondary); padding: var(--mk-sp-8); text-align: center; }

/* ---------- Editor ---------- */
.ed { display: grid; grid-template-rows: 52px 1fr auto; height: 100%; width: 100%; background: var(--mk-surface-muted); }
.ed-toolbar { display: flex; align-items: center; gap: var(--mk-sp-2); height: 52px; background: var(--mk-surface); border-bottom: 1px solid var(--mk-border); padding: 0 var(--mk-sp-4); }
.ed-tb-file { display: flex; align-items: center; gap: var(--mk-sp-3); min-width: 0; margin-left: 2px; }
.ed-tb-hist { display: flex; align-items: center; gap: 2px; margin-right: var(--mk-sp-4); }
.ed-toolbar .mk-iconbtn[disabled] { opacity: var(--mk-op-disabled); cursor: default; pointer-events: none; }
.ed-toolbar .mk-tabs { margin-right: 0; }
.ed-toolbar .mk-iconbtn { color: var(--mk-text-secondary); border-radius: var(--mk-r-small); transition: background var(--mk-mo-fast) var(--mk-mo-ease), color var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-toolbar .mk-iconbtn:hover { background: var(--mk-surface-muted); color: var(--mk-text-primary); }
.ed-toolbar .mk-iconbtn svg { width: 17px; height: 17px; display: block; }
.ed-toolbar .mk-tabs { padding: 2px; }
.ed-toolbar .mk-tab { padding: 5px 14px; font: var(--mk-t-caption); font-weight: 700; }
.ed-toolbar .mk-btn[data-ed="save"], .ed-toolbar .mk-btn[data-ed="preview"] { border-color: transparent !important; background: transparent; color: var(--mk-text-secondary); }
.ed-toolbar .mk-btn[data-ed="save"]:hover, .ed-toolbar .mk-btn[data-ed="preview"]:hover { background: var(--mk-surface-muted); color: var(--mk-text-primary); }
.ed-toolbar .fname { font: var(--mk-t-h3); max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-toolbar .savestate { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.ed-toolbar .grow { flex: 1; }
.ed-mid { display: grid; grid-template-columns: 64px 224px 1fr 248px; min-height: 0; }
.ed-mainmenu { background: var(--mk-surface); border-right: 1px solid var(--mk-border); display: flex; flex-direction: column; align-items: center; padding: var(--mk-sp-3) 0; gap: 6px; }
.ed-mainmenu button { width: 52px; height: 50px; border-radius: var(--mk-r-small); color: var(--mk-text-secondary); font: var(--mk-t-caption); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative;
  transition: background var(--mk-mo-fast) var(--mk-mo-ease), color var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-mainmenu button .ico { font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.ed-mainmenu button .ico svg { width: 19px; height: 19px; }
.ed-mainmenu button .ico .txtico { font-size: 15px; font-weight: 800; line-height: 1; }
.ed-mainmenu button:hover { background: var(--mk-surface-muted); color: var(--mk-text-primary); }
.ed-mainmenu button.on { background: var(--mk-teal-soft); color: var(--mk-teal); font-weight: 700; }
.ed-mainmenu button.on::before { content: ''; position: absolute; left: 3px; top: 15px; bottom: 15px; width: 2.5px; border-radius: 2px; background: var(--mk-teal); }
.ed-detail { background: var(--mk-surface); border-right: 1px solid var(--mk-border); padding: var(--mk-sp-4); overflow-y: auto; }
.ed-detail h3 { font: var(--mk-t-h3); margin-bottom: var(--mk-sp-3); }
.ed-detail .ph-list { display: flex; flex-direction: column; gap: 8px; }
.ed-detail .ph-item { display: flex; align-items: center; gap: 9px; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-small); padding: 11px 13px; font: var(--mk-t-body-sm); font-weight: 500; color: var(--mk-text-primary); text-align: left; cursor: pointer;
  transition: border-color var(--mk-mo-fast) var(--mk-mo-ease), box-shadow var(--mk-mo-fast) var(--mk-mo-ease), background var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-detail .ph-item::before { content: '＋'; font-weight: 700; color: var(--mk-teal); opacity: .6; transition: opacity var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-detail .ph-item:hover::before { opacity: 1; }
.ed-detail .ph-item:hover { border-color: var(--mk-teal); box-shadow: var(--mk-sh-subtle); }
.ed-detail .ph-item:active { transform: scale(.985); }
.ed-note { display: none; font: var(--mk-t-caption); color: var(--mk-text-disabled); margin-top: 12px; }
.ed--review .ed-note { display: block; }
.ed-canvaswrap { display: flex; min-width: 0; padding: var(--mk-sp-6); position: relative; overflow: auto; background: var(--mk-surface-muted); /* R96 — margin:auto 방식 */
  background-image: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%); }
.ed-zoom { position: absolute; right: 16px; bottom: 14px; display: flex; align-items: stretch; background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-pill); box-shadow: var(--mk-sh-floating); overflow: hidden; }
.ed-zoom button { height: 28px; padding: 0 10px; font: var(--mk-t-caption); font-weight: 700; color: var(--mk-text-secondary);
  transition: background var(--mk-mo-fast) var(--mk-mo-ease), color var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-zoom button + button { border-left: 1px solid var(--mk-border); }
.ed-zoom button[data-zoom="fit"] { min-width: 48px; color: var(--mk-text-primary); }
.ed-zoom button:hover { background: var(--mk-teal-soft); color: var(--mk-teal); }
.ed-zone-cap { display: block; font: var(--mk-t-caption); color: var(--mk-text-secondary); letter-spacing: .5px; text-align: center; margin-bottom: 6px; }
.ed-props .ed-zone-cap { text-align: left; margin-bottom: 10px; }
.ed-adv { margin: 8px 0 12px; padding-top: 6px; border-top: 1px dashed var(--mk-border); }
.ed-adv summary { font: var(--mk-t-caption); font-weight: 700; color: var(--mk-text-secondary); cursor: pointer; padding: 7px 8px; margin: 0 -8px; border-radius: var(--mk-r-small); list-style: none; transition: background var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-adv summary:hover { background: var(--mk-surface-muted); color: var(--mk-text-primary); }
.ed-adv summary::before { content: '▸ '; }
.ed-adv[open] summary::before { content: '▾ '; }
.ed-adv > div { padding-top: 6px; }
.ed-canvas { background: #fff; box-shadow: 0 0 0 1px rgba(20, 28, 40, .07), var(--mk-sh-floating); border-radius: 2px; position: relative; margin: auto; flex: none; }
.ed-el { position: absolute; cursor: pointer; }
.ed-el.sel { box-shadow: 0 0 0 1.5px var(--mk-coral); border-radius: 1px; }
.ed-el .hd { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid var(--mk-coral); border-radius: 1.5px; box-shadow: var(--mk-sh-subtle); pointer-events: none; }
.ed-el .hd.tl { left: -4px; top: -4px; } .ed-el .hd.tr { right: -4px; top: -4px; }
.ed-el .hd.bl { left: -4px; bottom: -4px; } .ed-el .hd.br { right: -4px; bottom: -4px; }
.ed-el.img-ph { background: var(--mk-surface-muted); border: 1.5px dashed var(--mk-border); display: flex; align-items: center; justify-content: center; color: var(--mk-text-secondary); font: var(--mk-t-caption); }
.ed-props { background: var(--mk-surface); border-left: 1px solid var(--mk-border); padding: var(--mk-sp-4); overflow-y: auto; }
.ed-props h3 { font: var(--mk-t-h3); margin: 0 0 var(--mk-sp-4); padding-bottom: 10px; border-bottom: 1px solid var(--mk-border); }
.ed-props .fld { margin-bottom: 12px; }
.ed-props .fld label { font: var(--mk-t-caption); font-weight: 600; color: var(--mk-text-secondary); display: block; margin-bottom: 5px; }
.ed-props .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-props .mk-input { height: 32px; padding: 0 10px; font: var(--mk-t-body-sm); background: var(--mk-surface-muted); border: 1px solid transparent; border-radius: var(--mk-r-small);
  transition: border-color var(--mk-mo-fast) var(--mk-mo-ease), background var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-props textarea.mk-input { height: 52px; padding: 7px 10px; resize: vertical; line-height: 1.45; }
.ed-props .mk-input:hover { background: var(--mk-surface); border-color: var(--mk-border); }
.ed-props .mk-input:focus { background: var(--mk-surface); border-color: var(--mk-teal); outline: none; box-shadow: 0 0 0 2px var(--mk-teal-soft); }
.ed-props select.mk-input { appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7480' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.ed-props .hint { display: none; font: var(--mk-t-caption); color: var(--mk-text-disabled); border-left: 2px solid var(--mk-border); padding: 2px 0 2px 10px; margin-top: var(--mk-sp-4); }
.ed--review .ed-props .hint { display: block; }
.ed-bottom { background: var(--mk-surface); border-top: 1px solid var(--mk-border); padding: 10px var(--mk-sp-4) 6px; }
.ed-strip { display: flex; gap: var(--mk-sp-4); align-items: flex-start; overflow-x: auto; padding: 2px 2px 4px; }
.ed-strip-add { width: 64px; height: 68px; border: 1.5px dashed var(--mk-border); border-radius: var(--mk-r-small); color: var(--mk-text-secondary); flex: none; font: var(--mk-t-caption); cursor: pointer;
  transition: border-color var(--mk-mo-fast) var(--mk-mo-ease), color var(--mk-mo-fast) var(--mk-mo-ease), background var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-strip-add:hover { border-color: var(--mk-teal); color: var(--mk-teal); background: var(--mk-teal-soft); }
.ed-sceneops { display: flex; gap: 4px; justify-content: center; margin-top: 4px; transition: opacity var(--mk-mo-fast) var(--mk-mo-ease); }
@media (hover: hover) {
  .ed-sceneops { opacity: 0; }
  .mk-scenecard:hover .ed-sceneops, .mk-scenecard.on .ed-sceneops, .mk-scenecard:focus-within .ed-sceneops { opacity: 1; }
}
.ed-sceneops button { font: var(--mk-t-caption); color: var(--mk-text-secondary); padding: 2px 5px; border-radius: 4px; }
.ed-sceneops button:hover { background: var(--mk-surface-muted); }
/* Video 모드 타임라인 */
.ed-timeline { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.ed-tl-block { flex: none; border-radius: var(--mk-r-small); border: 2px solid var(--mk-border); background: var(--mk-surface-muted); padding: 8px 10px; text-align: left; position: relative; min-width: 70px; cursor: pointer;
  transition: border-color var(--mk-mo-fast) var(--mk-mo-ease), background var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-tl-block:hover { border-color: #C4CBD6; background: var(--mk-surface); }
.ed-tl-block.on { border-color: var(--mk-coral); background: var(--mk-coral-soft); }
.ed-tl-block b { font: var(--mk-t-caption); display: block; }
.ed-tl-block .dur { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.ed-tl-trans { flex: none; align-self: center; font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.ed-tl-ruler { display: flex; font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-bottom: 6px; gap: 40px; }
.ed-playbar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--mk-sp-3); }
.ed-playbar .track { flex: 1; height: 5px; background: var(--mk-surface-muted); border-radius: 3px; position: relative; }
.ed-playbar .track i { position: absolute; left: 0; top: 0; bottom: 0; width: 22%; background: var(--mk-coral); border-radius: 3px; }
.ed-playbar .track i::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--mk-coral); border: 2px solid #fff; box-shadow: var(--mk-sh-subtle); }

/* ---------- 플레이스홀더 화면 ---------- */
.ph-screen { display: grid; gap: var(--mk-sp-4); max-width: 720px; }
.ph-block { border: 1.5px dashed var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-6); color: var(--mk-text-secondary); background: var(--mk-surface); }
.ph-block b { color: var(--mk-text-primary); display: block; margin-bottom: 4px; font: var(--mk-t-h3); }

/* ---------- 반응형 (데스크톱 우선, §15) ---------- */
@media (max-width: 1180px) { .ed-mid { grid-template-columns: 64px 0 1fr 248px; } .ed-detail { display: none; } }
@media (max-width: 960px) {
  .pg-shell { grid-template-columns: 60px 1fr; }
  .pg-nav-item span.txt, .pg-logo, .pg-nav-foot { display: none; }
  .ed-mid { grid-template-columns: 64px 0 1fr 0; } .ed-props { display: none; }
  .home-split, .br-layout, .fd-layout, .cmp-layout, .cg-layout, .cg2-layout { grid-template-columns: 1fr; }
  .cg-spec { grid-template-columns: 1fr; }
  .fd-preview { position: static; max-height: none; }
}

/* ============================================================
   Asset System v1  (as-*) — 전부 토큰 참조
   ============================================================ */
.as-shell{display:grid;grid-template-columns:200px 1fr 300px;gap:var(--mk-sp-4);align-items:start;min-height:520px}
.as-left{position:sticky;top:0}
.as-cats{display:flex;flex-direction:column;gap:2px;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-2)}
.as-cat{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:var(--mk-sp-2);padding:7px var(--mk-sp-2);border:none;background:none;border-radius:var(--mk-r-small);font:var(--mk-t-body-sm);color:var(--mk-text-primary);cursor:pointer;text-align:left}
.as-cat:hover{background:var(--mk-surface-muted)}
.as-cat.on{background:var(--mk-teal-soft);color:var(--mk-teal);font-weight:600}
.as-cat .ic{text-align:center}
.as-cat .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-cat .ko{display:none}
.as-cat .cnt{font:var(--mk-t-caption);color:var(--mk-text-secondary);background:var(--mk-surface-muted);border-radius:var(--mk-r-pill);padding:1px 7px}
.as-cat.on .cnt{background:var(--mk-surface);color:var(--mk-teal)}
.as-cat.virtual{border-top:1px solid var(--mk-border);border-radius:0}
.as-cat.virtual:first-of-type{border-top:none}
.as-cat.virtual + .as-cat.virtual{border-top:none}

.as-toolbar{display:flex;gap:var(--mk-sp-2);align-items:center;margin-bottom:var(--mk-sp-3)}
.as-search{flex:1;display:flex;align-items:center;gap:var(--mk-sp-2);background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-pill);padding:0 var(--mk-sp-4);height:38px}
.as-search input{flex:1;border:none;outline:none;background:none;font:var(--mk-t-body-sm);color:var(--mk-text-primary)}
.as-select{height:38px;border:1px solid var(--mk-border);border-radius:var(--mk-r-small);background:var(--mk-surface);font:var(--mk-t-body-sm);color:var(--mk-text-primary);padding:0 var(--mk-sp-2)}
.as-viewtg{display:flex;border:1px solid var(--mk-border);border-radius:var(--mk-r-small);overflow:hidden}
.as-viewtg button{width:38px;height:38px;border:none;background:var(--mk-surface);cursor:pointer;color:var(--mk-text-secondary);font-size:15px}
.as-viewtg button.on{background:var(--mk-teal-soft);color:var(--mk-teal)}
.as-tags{display:flex;gap:var(--mk-sp-2);flex-wrap:wrap;margin-bottom:var(--mk-sp-3)}

.as-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--mk-sp-3)}
.as-grid.list{grid-template-columns:1fr;gap:var(--mk-sp-2)}
.as-empty{grid-column:1/-1;text-align:center;padding:var(--mk-sp-10) 0;font:var(--mk-t-body-sm);color:var(--mk-text-secondary);background:var(--mk-surface);border:1px dashed var(--mk-border);border-radius:var(--mk-r-medium)}

.mk-assetthumb{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;border-radius:var(--mk-r-small);overflow:hidden;width:100%}
.mk-assetthumb .sym{font-size:26px;line-height:1}
.mk-assetthumb .tp{font:var(--mk-t-caption);opacity:.75;text-transform:uppercase;letter-spacing:.4px}

.mk-assetcard{position:relative;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-2);cursor:pointer;transition:box-shadow .15s,border-color .15s}
.mk-assetcard:hover{box-shadow:var(--mk-sh-floating)}
.mk-assetcard.on{border-color:var(--mk-teal);box-shadow:0 0 0 2px var(--mk-teal-soft)}
.mk-assetcard.dragging{opacity:.5}
.mk-assetcard .meta{margin-top:var(--mk-sp-2);display:flex;flex-direction:column;gap:1px;min-width:0}
.mk-assetcard .meta b{font:var(--mk-t-h3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-assetcard .meta small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.mk-assetcard .fav,.mk-assetcard .more{position:absolute;top:10px;width:26px;height:26px;border:none;border-radius:var(--mk-r-pill);background:rgba(255,255,255,.88);cursor:pointer;font-size:13px;color:var(--mk-text-secondary);display:none;align-items:center;justify-content:center;box-shadow:var(--mk-sh-subtle)}
.mk-assetcard .fav{right:42px}
.mk-assetcard .more{right:10px}
.mk-assetcard:hover .fav,.mk-assetcard:hover .more,.mk-assetcard .fav.on{display:flex}
.mk-assetcard .fav.on{color:var(--mk-coral)}
.mk-assetcard.list{display:grid;grid-template-columns:64px 1fr auto auto;align-items:center;gap:var(--mk-sp-3);padding:var(--mk-sp-2) var(--mk-sp-3)}
.mk-assetcard.list .mk-assetthumb{aspect-ratio:1/1!important;height:48px;width:64px}
.mk-assetcard.list .mk-assetthumb .sym{font-size:18px}
.mk-assetcard.list .mk-assetthumb .tp{display:none}
.mk-assetcard.list .meta{margin-top:0}
.mk-assetcard.list .fav,.mk-assetcard.list .more{position:static;display:flex;background:none;box-shadow:none}

.as-right{position:sticky;top:0}
.as-prev{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-4);display:flex;flex-direction:column;gap:var(--mk-sp-3)}
.as-prev.empty{align-items:center;justify-content:center;min-height:280px;color:var(--mk-text-secondary);text-align:center;font:var(--mk-t-body-sm);border-style:dashed;background:none}
.as-prev.empty span{font-size:34px;opacity:.4}
.as-prev .big .mk-assetthumb{min-height:140px}
.as-prev .big .mk-assetthumb .sym{font-size:42px}
.as-prev .ttl{font:var(--mk-t-h2)}
.as-prev .info{width:100%;border-collapse:collapse}
.as-prev .info th{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-align:left;padding:4px 8px 4px 0;white-space:nowrap;vertical-align:top;font-weight:500}
.as-prev .info td{font:var(--mk-t-body-sm);padding:4px 0;word-break:break-all}
.as-prev .info tr+tr th,.as-prev .info tr+tr td{border-top:1px solid var(--mk-surface-muted)}
.as-prev .acts{display:flex;flex-direction:column;gap:var(--mk-sp-2)}
.as-prev .acts .mk-btn{width:100%;justify-content:center}
.as-prev .drag-hint{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-align:center}

@media(max-width:1180px){.as-shell{grid-template-columns:180px 1fr}.as-right{display:none}}
@media(max-width:820px){.as-shell{grid-template-columns:1fr}.as-left{position:static}.as-cats{flex-direction:row;overflow-x:auto}.as-cat{grid-template-columns:auto auto;white-space:nowrap}.as-cat .cnt{display:none}}

/* ============================================================
   AI Studio v1  (ai-*) — 전부 토큰 참조
   ============================================================ */
.ai-shell{display:grid;grid-template-columns:220px 1fr 280px;gap:var(--mk-sp-4);align-items:start;min-height:560px}
.ai-side{display:flex;flex-direction:column;gap:var(--mk-sp-4)}
.ai-side>.mk-btn{width:100%;justify-content:center}
.ai-side .grp{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-3)}
.ai-side .grp h4{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--mk-sp-2)}
.ai-side .itm{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;border:none;background:none;padding:7px var(--mk-sp-2);border-radius:var(--mk-r-small);cursor:pointer;font:var(--mk-t-body-sm);color:var(--mk-text-primary)}
.ai-side .itm:hover{background:var(--mk-surface-muted)}
.ai-side .itm b{font:var(--mk-t-h3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-side .itm small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.ai-side .mut{font:var(--mk-t-caption);color:var(--mk-text-secondary);padding:var(--mk-sp-2);line-height:1.6}

.ai-chat{display:flex;flex-direction:column;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-large);min-height:560px;max-height:72vh}
.ai-stream{flex:1;overflow-y:auto;padding:var(--mk-sp-5);display:flex;flex-direction:column;gap:var(--mk-sp-3)}
.ai-msg{display:flex}
.ai-msg.me{justify-content:flex-end}
.ai-msg .bub{max-width:78%;padding:10px 14px;border-radius:var(--mk-r-medium);font:var(--mk-t-body-sm)}
.ai-msg.bot .bub{background:var(--mk-surface-muted);color:var(--mk-text-primary);border-bottom-left-radius:4px}
.ai-msg.me .bub{background:var(--mk-teal);color:#fff;border-bottom-right-radius:4px}
.ai-examples{display:flex;flex-wrap:wrap;gap:var(--mk-sp-2)}
.ai-ex{border:1px dashed var(--mk-border);background:none;border-radius:var(--mk-r-pill);padding:7px 14px;font:var(--mk-t-body-sm);color:var(--mk-text-secondary);cursor:pointer}
.ai-ex:hover{border-color:var(--mk-teal);color:var(--mk-teal);border-style:solid}
.ai-steps{margin:2px 0 0 18px;display:flex;flex-direction:column;gap:5px}
.ai-steps li{font:var(--mk-t-body-sm)}
.ai-dots{display:inline-flex;gap:4px;padding:2px 0}
.ai-dots i{width:6px;height:6px;border-radius:50%;background:var(--mk-text-secondary);animation:aiBl 1s infinite}
.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aiBl{0%,80%,100%{opacity:.25}40%{opacity:1}}
.ai-result{display:grid;grid-template-columns:120px 1fr;gap:var(--mk-sp-3);align-items:center}
.ai-result .thumb{border:1px solid var(--mk-border);border-radius:var(--mk-r-small);overflow:hidden;background:#fff}
.ai-result .inf{display:flex;flex-direction:column;gap:4px}
.ai-result .inf b{font:var(--mk-t-h3)}
.ai-result .inf small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.ai-result .row{display:flex;gap:var(--mk-sp-2);margin-top:4px}
.ai-actions{display:flex;flex-wrap:wrap;gap:var(--mk-sp-2);padding:var(--mk-sp-3) var(--mk-sp-5);border-top:1px solid var(--mk-surface-muted)}
.ai-inputrow{display:flex;gap:var(--mk-sp-2);padding:var(--mk-sp-3) var(--mk-sp-5) var(--mk-sp-4);border-top:1px solid var(--mk-border)}
.ai-inputrow input{flex:1;border:1px solid var(--mk-border);border-radius:var(--mk-r-pill);padding:0 var(--mk-sp-4);height:42px;font:var(--mk-t-body-sm);outline:none;color:var(--mk-text-primary);background:var(--mk-background)}
.ai-inputrow input:focus{border-color:var(--mk-teal)}

.ai-suggest{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-4);display:flex;flex-direction:column;gap:var(--mk-sp-4)}
.ai-suggest.empty{align-items:center;justify-content:center;min-height:280px;color:var(--mk-text-secondary);text-align:center;font:var(--mk-t-body-sm);border-style:dashed;background:none}
.ai-suggest.empty span{font-size:30px;opacity:.4}
.ai-suggest .sg h4{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--mk-sp-2)}
.ai-suggest .mk-tplcard{width:100%}
.ai-suggest .pillrow{display:flex;gap:6px;flex-wrap:wrap}
.ai-suggest .pill{font:var(--mk-t-caption);border:1px solid var(--mk-border);border-radius:var(--mk-r-pill);padding:4px 10px;color:var(--mk-text-secondary)}
.ai-suggest .pill.on{background:var(--mk-teal-soft);border-color:var(--mk-teal);color:var(--mk-teal);font-weight:600}
.ai-suggest .swrow{display:flex;gap:8px}
.ai-suggest .sw{width:30px;height:30px;border-radius:var(--mk-r-small);border:1px solid var(--mk-border)}
.ai-suggest .mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ai-suggest .mini4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ai-suggest .mini3 .mk-assetthumb,.ai-suggest .mini4 .mk-assetthumb{aspect-ratio:1/1!important}
.ai-suggest .mini3 .tp,.ai-suggest .mini4 .tp{display:none}
.ai-suggest .mut2{font:var(--mk-t-body-sm);color:var(--mk-text-secondary)}
.ai-suggest .ph-note{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-align:center;border-top:1px dashed var(--mk-border);padding-top:var(--mk-sp-3)}

.ai-chat.compact{min-height:340px;max-height:52vh;border-radius:var(--mk-r-medium)}
.ai-chat.compact .ai-stream{padding:var(--mk-sp-3)}
.ai-chat.compact .ai-inputrow{padding:var(--mk-sp-2) var(--mk-sp-3) var(--mk-sp-3)}

@media(max-width:1180px){.ai-shell{grid-template-columns:200px 1fr}.ai-right{display:none}}
@media(max-width:820px){.ai-shell{grid-template-columns:1fr}.ai-left{order:2}}

/* ============================================================
   Template Engine v1  (te-*) — 전부 토큰 참조
   ============================================================ */
.te-shell{display:grid;grid-template-columns:190px 1fr;gap:var(--mk-sp-4);align-items:start}
.te-left{display:flex;flex-direction:column;gap:2px;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-2);position:sticky;top:0}
.te-cat{display:flex;justify-content:space-between;align-items:center;gap:var(--mk-sp-2);padding:8px var(--mk-sp-3);border:none;background:none;border-radius:var(--mk-r-small);font:var(--mk-t-body-sm);color:var(--mk-text-primary);cursor:pointer;text-align:left}
.te-cat:hover{background:var(--mk-surface-muted)}
.te-cat.on{background:var(--mk-teal-soft);color:var(--mk-teal);font-weight:600}
.te-cat .cnt{font:var(--mk-t-caption);color:var(--mk-text-secondary);background:var(--mk-surface-muted);border-radius:var(--mk-r-pill);padding:1px 7px}
.te-cat.on .cnt{background:var(--mk-surface);color:var(--mk-teal)}
.te-toolbar{display:flex;gap:var(--mk-sp-2);margin-bottom:var(--mk-sp-3)}
.te-toolbar .as-search{flex:1}

.mk-tplcard .airec{position:absolute;top:8px;left:8px;font:var(--mk-t-caption);font-weight:700;background:var(--mk-teal);color:#fff;border-radius:var(--mk-r-pill);padding:3px 9px;z-index:1}

.mk-modal.te-wide{width:min(860px,92vw);max-width:none}
.te-prev{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--mk-sp-5)}
.te-prev .stage{border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);overflow:hidden;background:#fff}
.te-prev .strip{display:flex;gap:6px;overflow-x:auto;margin-top:var(--mk-sp-2)}
.te-prev .strip .th{flex:none;width:64px;border:2px solid var(--mk-border);border-radius:var(--mk-r-small);overflow:hidden;background:#fff;padding:0;cursor:pointer}
.te-prev .strip .th.on{border-color:var(--mk-teal)}
.te-prev .scnm{display:block;margin-top:6px;font:var(--mk-t-caption);color:var(--mk-text-secondary);text-align:center}
.te-prev .right h2{font:var(--mk-t-h1);display:flex;align-items:center;gap:8px}
.te-prev .right h2 .airec{font:var(--mk-t-caption);font-weight:700;background:var(--mk-teal);color:#fff;border-radius:var(--mk-r-pill);padding:3px 9px}
.te-prev .desc{font:var(--mk-t-body-sm);color:var(--mk-text-secondary);margin:6px 0 var(--mk-sp-3)}
.te-prev .info{width:100%;border-collapse:collapse;margin-bottom:var(--mk-sp-3)}
.te-prev .info th{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-align:left;padding:5px 10px 5px 0;white-space:nowrap;vertical-align:top;font-weight:500}
.te-prev .info td{font:var(--mk-t-body-sm);padding:5px 0}
.te-prev .info tr+tr th,.te-prev .info tr+tr td{border-top:1px solid var(--mk-surface-muted)}
.te-prev .sg h4{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-transform:uppercase;margin-bottom:6px}
.te-prev .swrow{display:flex;gap:8px}
.te-prev .sw{width:26px;height:26px;border-radius:var(--mk-r-small);border:1px solid var(--mk-border)}
.te-prev .acts{margin-top:var(--mk-sp-4);display:flex;flex-direction:column;gap:var(--mk-sp-2)}
.te-prev .acts>.mk-btn{width:100%;justify-content:center}
.te-prev .acts .row{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:820px){.te-shell{grid-template-columns:1fr}.te-left{position:static;flex-direction:row;overflow-x:auto}.te-cat{white-space:nowrap}.te-cat .cnt{display:none}.te-prev{grid-template-columns:1fr}}

/* ============================================================
   Project System v1  (pj-*) — 전부 토큰 참조
   ============================================================ */
.pj-tabs{display:flex;gap:var(--mk-sp-2);margin-bottom:var(--mk-sp-4);flex-wrap:wrap}
.pj-tab{display:flex;align-items:center;gap:8px;border:1px solid var(--mk-border);background:var(--mk-surface);border-radius:var(--mk-r-pill);padding:8px 16px;font:var(--mk-t-body-sm);color:var(--mk-text-primary);cursor:pointer}
.pj-tab.on{background:var(--mk-teal-soft);border-color:var(--mk-teal);color:var(--mk-teal);font-weight:600}
.pj-tab .cnt{font:var(--mk-t-caption);background:var(--mk-surface-muted);border-radius:var(--mk-r-pill);padding:1px 7px;color:var(--mk-text-secondary)}
.pj-tab.on .cnt{background:var(--mk-surface);color:var(--mk-teal)}
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--mk-sp-4)}
.pj-card{position:relative;text-align:left;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-2);cursor:pointer;transition:box-shadow .15s}
.pj-card:hover{box-shadow:var(--mk-sh-floating)}
.pj-card.trashed{opacity:.62}
.pj-card .thumb{position:relative;border:1px solid var(--mk-surface-muted);border-radius:var(--mk-r-small);overflow:hidden;background:#fff}
.pj-card .shared{position:absolute;top:8px;left:8px;z-index:1;font:var(--mk-t-caption);font-weight:700;background:var(--mk-coral);color:#fff;border-radius:var(--mk-r-pill);padding:3px 9px}
.pj-card .fav{position:absolute;top:6px;right:6px;z-index:1;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--mk-r-pill);background:rgba(255,255,255,.9);box-shadow:var(--mk-sh-subtle);color:var(--mk-text-secondary)}
.pj-card .fav.on{color:var(--mk-coral)}
.pj-card .meta{margin-top:var(--mk-sp-2);display:flex;flex-direction:column;gap:2px}
.pj-card .meta b{font:var(--mk-t-h3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-card .meta small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.pj-trashnote{margin-top:var(--mk-sp-3);font:var(--mk-t-caption);color:var(--mk-text-secondary);text-align:center}

.pj-detail{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--mk-sp-5)}
.pj-detail .stage{border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);overflow:hidden;background:#fff}
.pj-detail .sg{margin-top:var(--mk-sp-3)}
.pj-detail .sg h4{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-transform:uppercase;margin-bottom:6px}
.pj-detail .strip{display:flex;gap:8px;overflow-x:auto}
.pj-detail .strip .th{flex:none;width:76px}
.pj-detail .strip .fr{border:1px solid var(--mk-border);border-radius:var(--mk-r-small);overflow:hidden;background:#fff}
.pj-detail .strip small{font:var(--mk-t-caption);color:var(--mk-text-secondary);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-detail h2{font:var(--mk-t-h1)}
.pj-detail .info{width:100%;border-collapse:collapse;margin:var(--mk-sp-3) 0}
.pj-detail .info th{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-align:left;padding:5px 10px 5px 0;white-space:nowrap;vertical-align:top;font-weight:500}
.pj-detail .info td{font:var(--mk-t-body-sm);padding:5px 0}
.pj-detail .info tr+tr th,.pj-detail .info tr+tr td{border-top:1px solid var(--mk-surface-muted)}
.pj-detail .hist{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px}
.pj-detail .hist li{font:var(--mk-t-body-sm)}
.pj-detail .hist small{color:var(--mk-text-secondary)}
.pj-detail .mut2{font:var(--mk-t-body-sm);color:var(--mk-text-secondary)}
.pj-detail .acts{margin-top:var(--mk-sp-4);display:flex;flex-direction:column;gap:var(--mk-sp-2)}
.pj-detail .acts>.mk-btn{width:100%;justify-content:center}
.pj-detail .acts .row{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:820px){.pj-detail{grid-template-columns:1fr}}

/* ============================================================
   Workspace v1  (ws-*) — 전부 토큰 참조
   ============================================================ */
.ws-shell{display:flex;flex-direction:column;height:calc(100vh - 128px);min-height:560px;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-large);overflow:hidden}
.ws-top{display:flex;align-items:center;gap:var(--mk-sp-2);padding:var(--mk-sp-2) var(--mk-sp-3);border-bottom:1px solid var(--mk-border)}
.ws-top .pjname{display:flex;flex-direction:column;min-width:0;margin-right:var(--mk-sp-2)}
.ws-top .pjname b{font:var(--mk-t-h3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.ws-top .pjname small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.ws-top .grow{flex:1}
.ws-top .quick{display:flex;gap:4px;border-left:1px solid var(--mk-border);padding-left:var(--mk-sp-3)}
.ws-top .qk{border:1px dashed var(--mk-border);background:none;border-radius:var(--mk-r-pill);padding:5px 11px;font:var(--mk-t-caption);font-weight:600;color:var(--mk-text-secondary);cursor:pointer;white-space:nowrap}
.ws-top .qk:hover{border-style:solid;border-color:var(--mk-teal);color:var(--mk-teal)}

.ws-mid{flex:1;display:flex;min-height:0;position:relative}
.ws-left{display:flex;border-right:1px solid var(--mk-border);min-height:0}
.ws-rail{display:flex;flex-direction:column;gap:2px;padding:var(--mk-sp-2);border-right:1px solid var(--mk-surface-muted);background:var(--mk-background)}
.ws-rail button{display:flex;flex-direction:column;align-items:center;gap:2px;width:56px;padding:8px 0;border:none;background:none;border-radius:var(--mk-r-small);cursor:pointer;color:var(--mk-text-secondary)}
.ws-rail button .ico{font-size:16px}
.ws-rail button .nm{font:var(--mk-t-caption);font-size:10px}
.ws-rail button:hover{background:var(--mk-surface-muted)}
.ws-rail button.on{background:var(--mk-teal-soft);color:var(--mk-teal);font-weight:600}
.ws-navpanel{width:216px;padding:var(--mk-sp-3);overflow-y:auto}
.ws-navpanel h3{font:var(--mk-t-h3);margin-bottom:var(--mk-sp-2);display:flex;justify-content:space-between;align-items:baseline}
.ws-navpanel h3 small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.ws-navpanel h4{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-transform:uppercase;margin:var(--mk-sp-3) 0 var(--mk-sp-2)}
.ws-navpanel .mut{font:var(--mk-t-caption);color:var(--mk-text-secondary);margin-bottom:var(--mk-sp-2);line-height:1.5}
.ws-navpanel .lnk{border:none;background:none;color:var(--mk-teal);cursor:pointer;font:inherit;padding:0}
.ws-scenes{display:flex;flex-direction:column;gap:var(--mk-sp-2)}
.ws-minitpl{display:flex;flex-direction:column;gap:var(--mk-sp-2)}
.ws-minitpl .mk-tplcard{width:100%}
.ws-miniassets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ws-miniassets .mini{border:1px solid var(--mk-border);background:none;border-radius:var(--mk-r-small);padding:2px;cursor:pointer;overflow:hidden}
.ws-miniassets .mini:hover{border-color:var(--mk-teal)}
.ws-miniassets .tp{display:none}
.ws-aihist .row{display:flex;flex-direction:column;padding:6px 0;border-bottom:1px solid var(--mk-surface-muted)}
.ws-aihist .row b{font:var(--mk-t-body-sm)}
.ws-aihist .row small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.ws-comment{background:var(--mk-surface-muted);border-radius:var(--mk-r-small);padding:var(--mk-sp-2);margin-bottom:var(--mk-sp-2)}
.ws-comment b{font:var(--mk-t-caption);font-weight:700}
.ws-comment p{font:var(--mk-t-body-sm);margin:2px 0}
.ws-comment small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.ws-hist .row{display:flex;gap:8px;align-items:flex-start;padding:5px 0}
.ws-hist .dot{width:8px;height:8px;border-radius:50%;background:var(--mk-teal);margin-top:5px;flex:none}
.ws-hist b{font:var(--mk-t-body-sm);display:block}
.ws-hist small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}

.ws-canvaswrap{flex:1;min-width:0;display:flex;background:var(--mk-surface-muted);overflow:auto;padding:var(--mk-sp-5)}
/* R96 — centered-overflow 함정 해제: 가운데 정렬을 margin:auto로.
   justify/align center + overflow:auto는 넘친 시작쪽 조각이 스크롤 원점
   「앞」이라 영원히 도달 불능(보이지도 눌리지도 않음) — 좁은 폭에서
   캔버스 좌우 끝 핸들이 죽던 원인. margin:auto는 공간이 남으면 똑같이
   가운데, 넘치면 전 구간이 스크롤로 닿는다. */
.ws-canvas{position:relative;box-shadow:var(--mk-sh-floating);border-radius:2px;flex:none;margin:auto}
.ws-canvas.photo{outline:3px solid var(--mk-coral-soft)}
.ws-el{position:absolute;cursor:pointer;border:1.5px solid transparent;border-radius:2px}
.ws-el:hover{border-color:var(--mk-teal-soft)}
.ws-el.sel{border-color:var(--mk-teal)}
.ws-el.text{color:#3A4454;line-height:1.3;word-break:keep-all}
.ws-el.box{background:rgba(201,210,222,.45);display:flex;align-items:center;justify-content:center}
.ws-el.box span{font:var(--mk-t-caption);color:var(--mk-text-secondary)}

.ws-context{width:236px;border-left:1px solid var(--mk-border);padding:var(--mk-sp-3);overflow-y:auto}
.ws-context .cap{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-transform:uppercase}
.ws-context h3{font:var(--mk-t-h3);margin:2px 0 var(--mk-sp-3)}
.cx-field{display:flex;flex-direction:column;gap:3px;margin-bottom:var(--mk-sp-2)}
.cx-field span{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.cx-field input,.cx-field textarea{border:1px solid var(--mk-border);border-radius:var(--mk-r-small);padding:7px 9px;font:var(--mk-t-body-sm);color:var(--mk-text-primary);background:var(--mk-background);resize:vertical}
.cx-field input:focus,.cx-field textarea:focus{outline:none;border-color:var(--mk-teal);background:var(--mk-surface)}
.cx-sw{display:flex;gap:6px;margin-top:4px}
.cx-sw span{width:24px;height:24px;border-radius:var(--mk-r-small);border:1px solid var(--mk-border)}
.cx-hint{font:var(--mk-t-caption);color:var(--mk-text-secondary);border:1px dashed var(--mk-border);border-radius:var(--mk-r-small);padding:7px 9px;margin-top:var(--mk-sp-2)}
.cx-scenebtn{width:100%;margin-top:var(--mk-sp-2);border:1px solid var(--mk-border);background:none;border-radius:var(--mk-r-small);padding:7px;font:var(--mk-t-caption);color:var(--mk-text-secondary);cursor:pointer}
.cx-scenebtn:hover{border-color:var(--mk-teal);color:var(--mk-teal)}

.ws-footer{display:flex;align-items:center;gap:var(--mk-sp-3);padding:var(--mk-sp-2) var(--mk-sp-3);border-top:1px solid var(--mk-border)}
.ws-footer .modes{display:flex;background:var(--mk-surface-muted);border-radius:var(--mk-r-pill);padding:3px}
.ws-footer .modes button{border:none;background:none;border-radius:var(--mk-r-pill);padding:5px 13px;font:var(--mk-t-caption);font-weight:600;color:var(--mk-text-secondary);cursor:pointer}
.ws-footer .modes button.on{background:var(--mk-surface);color:var(--mk-teal);box-shadow:var(--mk-sh-subtle)}
.ws-footer .grow{flex:1}
.ws-footer .zoom,.ws-footer .page{display:flex;align-items:center;gap:4px;font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.ws-timeline{flex:2;display:flex;gap:3px;max-width:420px}
.ws-timeline .tl{position:relative;border:1px solid var(--mk-border);background:var(--mk-surface-muted);border-radius:var(--mk-r-small);height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:30px}
.ws-timeline .tl.on{border-color:var(--mk-teal);background:var(--mk-teal-soft)}
.ws-timeline .tl small{position:absolute;top:1px;left:4px;font-size:9px;color:var(--mk-text-secondary)}
.ws-timeline .tl span{font:var(--mk-t-caption);color:var(--mk-text-secondary)}

.ws-dock{position:absolute;right:0;top:0;bottom:0;width:264px;background:var(--mk-surface);border-left:1px solid var(--mk-border);box-shadow:var(--mk-sh-floating);display:flex;flex-direction:column;z-index:var(--mk-z-panel)}
.ws-dock .head{display:flex;align-items:center;gap:8px;padding:var(--mk-sp-3);border-bottom:1px solid var(--mk-border)}
.ws-dock .head b{font:var(--mk-t-h3);color:var(--mk-teal)}
.ws-dock .head small{flex:1;font:var(--mk-t-caption);color:var(--mk-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-dock .head button{border:none;background:none;cursor:pointer;color:var(--mk-text-secondary);font-size:13px}
.ws-dock .quickai{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:var(--mk-sp-3);border-bottom:1px solid var(--mk-surface-muted)}
.ws-dock .quickai button{border:1px solid var(--mk-border);background:none;border-radius:var(--mk-r-small);padding:8px 4px;font:var(--mk-t-caption);font-weight:600;color:var(--mk-text-primary);cursor:pointer}
.ws-dock .quickai button:hover{border-color:var(--mk-teal);color:var(--mk-teal)}
.ws-dock .chat{flex:1;overflow-y:auto;padding:var(--mk-sp-3);display:flex;flex-direction:column;gap:var(--mk-sp-2)}
.ws-dock .msg{background:var(--mk-surface-muted);border-radius:var(--mk-r-medium);padding:9px 11px}
.ws-dock .msg b{font:var(--mk-t-caption);color:var(--mk-teal)}
.ws-dock .msg p{font:var(--mk-t-body-sm);margin-top:2px}

/* 모드별 차등 */
.mode-photo .ws-top .qk[data-ws-q="scene"],.mode-photo .ws-top .qk[data-ws-q="video"]{display:none}
.mode-design .ws-top .qk[data-ws-q="video"]{display:none}
.mode-presentation .ws-footer .page{font-weight:700;color:var(--mk-teal)}
@media(max-width:1180px){.ws-context{display:none}.ws-navpanel{width:180px}}
@media(max-width:820px){.ws-left{display:none}.ws-top .quick{display:none}}

/* ============================================================
   Template Builder v1  (tb-*) — 운영자 도구, 전부 토큰 참조
   ============================================================ */
.tb-shell{display:grid;grid-template-columns:230px 1fr 250px;gap:var(--mk-sp-4);align-items:start;min-height:560px}
.tb-explorer{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-3);position:sticky;top:0}
.tb-explorer .flt{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--mk-sp-3)}
.tb-explorer .flt button{display:flex;justify-content:space-between;border:none;background:none;border-radius:var(--mk-r-small);padding:6px var(--mk-sp-2);font:var(--mk-t-body-sm);color:var(--mk-text-primary);cursor:pointer}
.tb-explorer .flt button:hover{background:var(--mk-surface-muted)}
.tb-explorer .flt button.on{background:var(--mk-teal-soft);color:var(--mk-teal);font-weight:600}
.tb-explorer .flt button span{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.tb-explorer .lst{display:flex;flex-direction:column;gap:var(--mk-sp-2);max-height:52vh;overflow-y:auto}
.tb-explorer .itm{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--mk-border);background:var(--mk-surface);border-radius:var(--mk-r-small);padding:var(--mk-sp-2);cursor:pointer;text-align:left}
.tb-explorer .itm:hover{box-shadow:var(--mk-sh-subtle)}
.tb-explorer .itm.on{border-color:var(--mk-teal)}
.tb-explorer .itm b{font:var(--mk-t-h3)}
.tb-explorer .itm small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.tb-explorer .mut{font:var(--mk-t-caption);color:var(--mk-text-secondary);padding:var(--mk-sp-2)}

.st{font:var(--mk-t-caption);font-weight:700;border-radius:var(--mk-r-pill);padding:2px 8px}
.st-draft{background:var(--mk-surface-muted);color:var(--mk-text-secondary)}
.st-review{background:var(--mk-cream);color:#8A7A55}
.st-approved{background:var(--mk-coral-soft);color:var(--mk-coral)}
.st-published{background:var(--mk-teal-soft);color:var(--mk-teal)}

.tb-canvaswrap{display:flex;flex-direction:column;gap:var(--mk-sp-3)}
.tb-empty{border:1px dashed var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-10);text-align:center;font:var(--mk-t-body-sm);color:var(--mk-text-secondary);line-height:1.7}
.tb-canvashead{display:flex;align-items:center;gap:var(--mk-sp-2)}
.tb-canvashead b{font:var(--mk-t-h3)}
.tb-canvashead .grow{flex:1}
.tb-stage{display:flex;background:var(--mk-surface-muted);border-radius:var(--mk-r-medium);padding:var(--mk-sp-5);overflow:auto}
.tb-stage>*{margin:auto} /* R96 */
.tb-canvas{position:relative;box-shadow:var(--mk-sh-floating);border-radius:2px;flex:none}
.tb-canvas.bgsel{outline:2px solid var(--mk-teal)}
.tb-canvas>.mark.bg{position:absolute;top:6px;right:6px;z-index:2}
.tb-el{position:absolute;cursor:pointer;border:1.5px dashed transparent;border-radius:2px;color:#3A4454;line-height:1.3}
.tb-el:hover{border-color:var(--mk-border)}
.tb-el.sel{border-color:var(--mk-teal);border-style:solid}
.tb-el.editable{border-color:var(--mk-teal);border-style:dashed}
.tb-el.locked{border-color:var(--mk-text-secondary);border-style:solid;opacity:.85}
.tb-el .lb{font:var(--mk-t-caption);color:var(--mk-text-secondary);display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:rgba(201,210,222,.4)}
.mark{position:absolute;top:-9px;left:-2px;font:var(--mk-t-caption);font-size:9px;font-weight:700;border-radius:var(--mk-r-pill);padding:1px 6px;z-index:2;white-space:nowrap}
.mark.edit{background:var(--mk-teal);color:#fff}
.mark.lock{background:var(--mk-text-secondary);color:#fff}

.tb-scenes{display:flex;gap:var(--mk-sp-2);overflow-x:auto;padding-bottom:4px}
.tb-scenes .sc{flex:none;width:96px}
.tb-scenes .fr{position:relative;width:100%;border:2px solid var(--mk-border);border-radius:var(--mk-r-small);overflow:hidden;background:#fff;padding:0;cursor:pointer;display:block}
.tb-scenes .sc.on .fr{border-color:var(--mk-teal)}
.tb-scenes .fr .n{position:absolute;top:2px;left:4px;font:var(--mk-t-caption);font-size:10px;color:var(--mk-text-secondary)}
.tb-scenes .ops{display:flex;justify-content:center;gap:2px;margin-top:2px}
.tb-scenes .ops button{border:none;background:none;font-size:11px;color:var(--mk-text-secondary);cursor:pointer;padding:2px 4px;border-radius:4px}
.tb-scenes .ops button:hover:not(:disabled){background:var(--mk-surface-muted);color:var(--mk-teal)}
.tb-scenes .ops button:disabled{opacity:.3;cursor:default}
.tb-scenes .add{flex:none;width:64px;border:1px dashed var(--mk-border);border-radius:var(--mk-r-small);background:none;color:var(--mk-text-secondary);cursor:pointer;font-size:16px;line-height:1.2}
.tb-scenes .add small{font-size:10px}
.tb-scenes .add:hover{border-color:var(--mk-teal);color:var(--mk-teal)}

.tb-props{width:auto;border-left:none;border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);background:var(--mk-surface);position:sticky;top:0;max-height:calc(100vh - 140px)}
.tb-props select{border:1px solid var(--mk-border);border-radius:var(--mk-r-small);padding:7px 9px;font:var(--mk-t-body-sm);color:var(--mk-text-primary);background:var(--mk-background)}
.tb-area{margin-top:var(--mk-sp-3);border-top:1px solid var(--mk-border);padding-top:var(--mk-sp-3)}
.tb-area h4{font:var(--mk-t-h3);margin-bottom:var(--mk-sp-2)}
.tb-area .sub{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-transform:uppercase;margin-bottom:6px}
.tb-area .types{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.tb-area .types button{border:1px solid var(--mk-border);background:none;border-radius:var(--mk-r-small);padding:6px 2px;font:var(--mk-t-caption);font-weight:600;color:var(--mk-text-primary);cursor:pointer}
.tb-area .types button.on{background:var(--mk-teal-soft);border-color:var(--mk-teal);color:var(--mk-teal)}
.tb-area .types button:disabled{opacity:.35;cursor:default}
.tb-area .mut{font:var(--mk-t-caption);color:var(--mk-text-secondary)}

.tb-preview h2{font:var(--mk-t-h1);display:flex;align-items:center;gap:8px}
.tb-preview .mut{font:var(--mk-t-body-sm);color:var(--mk-text-secondary);margin:6px 0 var(--mk-sp-3)}
.tb-preview .stage{position:relative;margin:0 auto;box-shadow:var(--mk-sh-floating);border-radius:2px}
.tb-preview .stage.bghl{outline:3px dashed var(--mk-teal);outline-offset:3px}
.tb-preview .pv-el{position:absolute;color:#3A4454;line-height:1.3;border:1.5px solid transparent;border-radius:2px}
.tb-preview .pv-el.box{background:rgba(201,210,222,.45)}
.tb-preview .pv-el.hl{border-color:var(--mk-teal);border-style:dashed;background:rgba(46,140,127,.06)}
.tb-preview .nav{display:flex;align-items:center;justify-content:center;gap:var(--mk-sp-2);margin-top:var(--mk-sp-3);font:var(--mk-t-caption);color:var(--mk-text-secondary)}
@media(max-width:1180px){.tb-shell{grid-template-columns:200px 1fr}.tb-props{display:none}}
@media(max-width:820px){.tb-shell{grid-template-columns:1fr}.tb-explorer{position:static}}

/* ============================================================
   Animation Engine v1  (an-* / mka-*) — 전부 토큰 참조
   ============================================================ */
.an-shell{display:grid;grid-template-columns:250px 1fr 240px;gap:var(--mk-sp-4);align-items:start;min-height:540px}
.an-gallery{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-3);position:sticky;top:0;max-height:calc(100vh - 150px);overflow-y:auto}
.an-gallery h3{font:var(--mk-t-h3);margin-bottom:4px}
.an-gallery .mut{font:var(--mk-t-caption);color:var(--mk-text-secondary);margin-bottom:var(--mk-sp-2)}
.an-gallery .cards{display:flex;flex-direction:column;gap:var(--mk-sp-2)}
.an-gallery .pcard{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:0 var(--mk-sp-2);align-items:center;border:1px solid var(--mk-border);background:var(--mk-surface);border-radius:var(--mk-r-small);padding:var(--mk-sp-2);cursor:pointer;text-align:left}
.an-gallery .pcard:hover{box-shadow:var(--mk-sh-subtle)}
.an-gallery .pcard.on{border-color:var(--mk-teal);background:var(--mk-teal-soft)}
.an-gallery .pcard .demo{grid-row:span 2;width:40px;height:40px;background:var(--mk-surface-muted);border-radius:var(--mk-r-small);display:flex;align-items:center;justify-content:center;overflow:hidden}
.an-gallery .pcard .demo i{width:16px;height:16px;background:var(--mk-teal);border-radius:3px;display:block}
.an-gallery .pcard b{font:var(--mk-t-h3)}
.an-gallery .pcard small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}

.an-stagewrap{display:flex;flex-direction:column;gap:var(--mk-sp-2)}
.an-stagehead{display:flex;align-items:center;gap:var(--mk-sp-2)}
.an-stagehead .phase{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.an-stagehead .grow{flex:1}
.an-stagehead .mut{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.an-stagebg{display:flex;justify-content:center;background:var(--mk-surface-muted);border-radius:var(--mk-r-medium);padding:var(--mk-sp-5);overflow:hidden}
.an-stage{position:relative;box-shadow:var(--mk-sh-floating);border-radius:2px;flex:none;overflow:hidden}
.an-el{position:absolute;cursor:pointer;border:1.5px solid transparent;border-radius:2px;color:#3A4454;line-height:1.3}
.an-el:hover{border-color:var(--mk-teal-soft)}
.an-el.sel{border-color:var(--mk-teal)}
.an-el.box{background:rgba(201,210,222,.45);display:flex;align-items:center;justify-content:center}
.an-el.box span{font:var(--mk-t-caption);color:var(--mk-text-secondary)}

.an-panel .slots{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:var(--mk-sp-2)}
.an-panel .slot{display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid var(--mk-border);background:none;border-radius:var(--mk-r-small);padding:8px 2px;cursor:pointer}
.an-panel .slot small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.an-panel .slot b{font:var(--mk-t-caption);font-weight:700}
.an-panel .slot.on{border-color:var(--mk-teal);background:var(--mk-teal-soft)}
.an-panel .slot.on b{color:var(--mk-teal)}
.an-panel .mut{font:var(--mk-t-caption);color:var(--mk-text-secondary);margin-bottom:var(--mk-sp-2);line-height:1.5}
.an-panel select,.an-panel input{border:1px solid var(--mk-border);border-radius:var(--mk-r-small);padding:7px 9px;font:var(--mk-t-body-sm);color:var(--mk-text-primary);background:var(--mk-background);width:100%}
.an-elprops{margin-top:var(--mk-sp-3);border-top:1px solid var(--mk-border);padding-top:var(--mk-sp-3)}
.an-elprops h4{font:var(--mk-t-h3);margin-bottom:var(--mk-sp-2)}

.an-timeline{display:flex;gap:4px;margin-top:var(--mk-sp-3);align-items:flex-end;flex-wrap:wrap}
.an-timeline .tl{position:relative;display:flex;height:30px;min-width:56px;border:1px solid var(--mk-border);border-radius:var(--mk-r-small);overflow:hidden;cursor:pointer;background:var(--mk-surface);padding:0}
.an-timeline .tl.on{border-color:var(--mk-teal);box-shadow:0 0 0 2px var(--mk-teal-soft)}
.an-timeline .seg{height:100%}
.an-timeline .seg.in{background:var(--mk-teal)}
.an-timeline .seg.idle{background:var(--mk-teal-soft)}
.an-timeline .seg.out{background:var(--mk-coral-soft)}
.an-timeline .tl small{position:absolute;left:6px;top:50%;transform:translateY(-50%);font:var(--mk-t-caption);font-size:10px;color:var(--mk-text-primary);text-shadow:0 0 3px rgba(255,255,255,.9)}
.an-timeline .legend{display:flex;align-items:center;gap:6px;font:var(--mk-t-caption);color:var(--mk-text-secondary);margin-left:var(--mk-sp-2)}
.an-timeline .legend .k{width:10px;height:10px;border-radius:2px;display:inline-block}
.an-timeline .legend .k.in{background:var(--mk-teal)}
.an-timeline .legend .k.idle{background:var(--mk-teal-soft)}
.an-timeline .legend .k.out{background:var(--mk-coral-soft)}
@media(max-width:1180px){.an-shell{grid-template-columns:210px 1fr}.an-panel{display:none}}
@media(max-width:820px){.an-shell{grid-template-columns:1fr}.an-gallery{position:static;max-height:none}}

/* ---------- 프리셋 키프레임 (enter=in / exit=out / idle / 갤러리 loop) ---------- */
[data-mka]{animation-duration:var(--mka-dur,.6s);animation-delay:var(--mka-delay,0s);animation-timing-function:var(--mka-ease,ease-out);animation-fill-mode:both;animation-iteration-count:var(--mka-repeat,1)}
@keyframes mkaFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mkaFadeOut{from{opacity:1}to{opacity:0}}
.mka-in-fade{animation-name:mkaFadeIn}.mka-out-fade{animation-name:mkaFadeOut}
@keyframes mkaSlideUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes mkaSlideDown{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
@keyframes mkaSlideLeft{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes mkaSlideRight{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.mka-in-slide.mka-dir-up{animation-name:mkaSlideUp}.mka-in-slide.mka-dir-down{animation-name:mkaSlideDown}
.mka-in-slide.mka-dir-left{animation-name:mkaSlideLeft}.mka-in-slide.mka-dir-right{animation-name:mkaSlideRight}
@keyframes mkaSlideOut{to{opacity:0;transform:translateY(-20px)}}
.mka-out-slide{animation-name:mkaSlideOut}
@keyframes mkaScaleIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.mka-in-scale{animation-name:mkaScaleIn}
@keyframes mkaScaleOut{to{opacity:0;transform:scale(.85)}}
.mka-out-scale{animation-name:mkaScaleOut}
@keyframes mkaZoomIn{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
.mka-in-zoom{animation-name:mkaZoomIn}
@keyframes mkaZoomOut{to{opacity:0;transform:scale(1.2)}}
.mka-out-zoom{animation-name:mkaZoomOut}
@keyframes mkaPopIn{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.07)}100%{transform:scale(1)}}
.mka-in-pop{animation-name:mkaPopIn}.mka-out-pop{animation-name:mkaScaleOut}
@keyframes mkaBounceIn{0%{opacity:0;transform:translateY(-34px)}55%{opacity:1;transform:translateY(6px)}75%{transform:translateY(-4px)}100%{transform:none}}
.mka-in-bounce{animation-name:mkaBounceIn}.mka-out-bounce{animation-name:mkaSlideOut}
@keyframes mkaWipeLR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes mkaWipeRL{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes mkaWipeTB{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes mkaWipeBT{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.mka-in-wipe.mka-dir-right{animation-name:mkaWipeLR}.mka-in-wipe.mka-dir-left{animation-name:mkaWipeRL}
.mka-in-wipe.mka-dir-down{animation-name:mkaWipeTB}.mka-in-wipe.mka-dir-up{animation-name:mkaWipeBT}
@keyframes mkaWipeOut{to{clip-path:inset(0 0 100% 0);opacity:0}}
.mka-out-wipe{animation-name:mkaWipeOut}
@keyframes mkaBlurIn{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:blur(0)}}
.mka-in-blur{animation-name:mkaBlurIn}
@keyframes mkaBlurOut{to{opacity:0;filter:blur(6px)}}
.mka-out-blur{animation-name:mkaBlurOut}
@keyframes mkaRotateIn{from{opacity:0;transform:rotate(-7deg) scale(.94)}to{opacity:1;transform:none}}
.mka-in-rotate{animation-name:mkaRotateIn}
@keyframes mkaRotateOut{to{opacity:0;transform:rotate(5deg) scale(.95)}}
.mka-out-rotate{animation-name:mkaRotateOut}
@keyframes mkaIdleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.mka-idle-float{animation:mkaIdleFloat 2.4s ease-in-out infinite}
@keyframes mkaIdlePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.mka-idle-pulse{animation:mkaIdlePulse 2s ease-in-out infinite}
/* 갤러리 데모 무한 루프 (프리셋별) */
.an-gallery .demo i{animation-duration:1.5s;animation-iteration-count:infinite}
.mka-loop-fade{animation-name:mkaFadeIn}
.mka-loop-slide{animation-name:mkaSlideUp}
.mka-loop-scale{animation-name:mkaScaleIn}
.mka-loop-zoom{animation-name:mkaZoomIn}
.mka-loop-pop{animation-name:mkaPopIn}
.mka-loop-bounce{animation-name:mkaBounceIn}
.mka-loop-wipe{animation-name:mkaWipeLR}
.mka-loop-blur{animation-name:mkaBlurIn}
.mka-loop-rotate{animation-name:mkaRotateIn}
.mka-loop-float{animation:mkaIdleFloat 2.4s ease-in-out infinite} /* R57 — Idle 갤러리 데모 */
.mka-loop-pulse{animation:mkaIdlePulse 2s ease-in-out infinite}
.mka-loop-none{animation:none}

/* ============================================================
   Home v2 (h2-*) — Sprint 02 "Quiet Confidence" 구현
   프레임 1120 · 시선축 680 · Hero 상하 72 · 섹션 간 40~56
   구 hv-*는 create.js 공유로 유지 — h2는 독립.
   ============================================================ */
.h2 { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ---- Header : 높이 56 · 배경 동일 · 스크롤 시에만 하단 보더 ---- */
.h2-header { height: 56px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: var(--mk-background); z-index: var(--mk-z-panel);
  border-bottom: 1px solid transparent; transition: border-color var(--mk-mo-base) var(--mk-mo-ease); }
.h2-header.elev { border-bottom-color: var(--mk-border); }
.h2-logo { font: var(--mk-t-h2); letter-spacing: .2px; background: none; border: 0; cursor: pointer; color: var(--mk-text-primary); padding: 0; }
.h2-nav { display: flex; align-items: center; gap: var(--mk-sp-6); }
.h2-link { font: var(--mk-t-body-sm); font-weight: 500; color: var(--mk-text-secondary); background: none; border: 0; cursor: pointer; padding: 4px 0;
  transition: color var(--mk-mo-fast) var(--mk-mo-ease); }
.h2-link:hover { color: var(--mk-text-primary); }
.h2-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--mk-r-small); cursor: pointer; color: var(--mk-text-secondary); opacity: var(--mk-op-secondary);
  transition: opacity var(--mk-mo-fast) var(--mk-mo-ease); position: relative; }
.h2-icon::after { content: ''; position: absolute; inset: -5px; }        /* 터치 44 확장 */
.h2-icon:hover { opacity: 1; }
.h2-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--mk-border);
  display: inline-flex; align-items: center; justify-content: center; font: var(--mk-t-caption); background: var(--mk-surface); }

/* ---- 진입 모션 (이동 ≤8px · stagger) ---- */
@keyframes h2in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.h2-hero { animation: h2in var(--mk-mo-base) var(--mk-mo-ease) both; }
.h2-sec  { animation: h2in var(--mk-mo-base) var(--mk-mo-ease) both; }
.h2-sec:nth-of-type(2) { animation-delay: 60ms; }
.h2-sec:nth-of-type(3) { animation-delay: 120ms; }
.h2-sec:nth-of-type(4) { animation-delay: 180ms; }

/* ---- Hero : 질문 1회 display · 입력창 680 ---- */
.h2-hero { text-align: center; padding: var(--mk-sp-18) 0 0; }
.h2-q { font: var(--mk-t-display); font-size: 32px; line-height: 40px; margin: 0 0 var(--mk-sp-4); }
.h2-input { position: relative; max-width: 680px; margin: 0 auto; display: flex; align-items: center;
  background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-large); height: 56px;
  padding: 0 8px 0 24px; transition: border-color var(--mk-mo-fast) var(--mk-mo-ease), box-shadow var(--mk-mo-fast) var(--mk-mo-ease),
  transform var(--mk-mo-slow) var(--mk-mo-ease); }
.h2-input:focus-within { border-color: var(--mk-teal); box-shadow: 0 0 0 3px var(--mk-teal-soft), inset 0 0 0 .5px var(--mk-teal); }
.h2-hero.composing .h2-input { transform: translateY(-8px); }
.h2-input input { flex: 1; border: 0; outline: 0; background: none; font: var(--mk-t-body); color: var(--mk-text-primary); min-width: 0; }
.h2-input input::placeholder { color: var(--mk-text-secondary); transition: opacity var(--mk-mo-base) var(--mk-mo-ease); }
.h2-input input.ph-swap::placeholder { opacity: 0; }
.h2-make { height: 40px; padding: 0 20px; border: 0; border-radius: var(--mk-r-pill); background: var(--mk-teal); color: #fff;
  font: var(--mk-t-button); cursor: pointer; transition: background var(--mk-mo-fast) var(--mk-mo-ease), transform 80ms; }
.h2-make:hover { background: var(--mk-teal-hover); }
.h2-make:active { transform: scale(.98); }
.h2-make .ic { display: none; }

/* ---- AI 흐름 (단계 = 로딩 UI · 결과 카드 spring 1곳) ---- */
.h2-flow { max-width: 680px; margin: 0 auto; text-align: left; }
.h2-steps { list-style: none; margin: var(--mk-sp-4) 0 0; padding: 0; }
.h2-steps li { font: var(--mk-t-body-sm); color: var(--mk-text-secondary); padding: 5px 0 5px 20px; position: relative;
  animation: h2in var(--mk-mo-base) var(--mk-mo-ease) both; }
.h2-steps li::before { content: '·'; position: absolute; left: 6px; color: var(--mk-teal); }
@keyframes h2pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.h2-result { display: flex; gap: var(--mk-sp-4); align-items: center; margin-top: var(--mk-sp-4);
  background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5);
  animation: h2pop var(--mk-mo-slow) var(--mk-mo-spring) both; }
.h2-result-row { display: flex; gap: var(--mk-sp-2); margin-top: var(--mk-sp-3); }

/* ---- Quick Create : 칩 6 · 입력창의 절반 이하 무게 ---- */
.h2-chips { display: flex; justify-content: center; gap: var(--mk-sp-2); margin-top: var(--mk-sp-4);
  transition: opacity var(--mk-mo-base) var(--mk-mo-ease); }
.h2-hero.composing .h2-chips { opacity: 0; pointer-events: none; height: 0; margin-top: 0; overflow: hidden; }
.h2-chip { height: 34px; padding: 0 14px; border-radius: var(--mk-r-pill); background: none;
  border: 1px solid var(--mk-border); color: var(--mk-text-secondary); font: var(--mk-t-body-sm); font-weight: 500; cursor: pointer;
  transition: color var(--mk-mo-fast) var(--mk-mo-ease), border-color var(--mk-mo-fast) var(--mk-mo-ease), transform 80ms;
  position: relative; }
.h2-chip::after { content: ''; position: absolute; inset: -5px 0; }      /* 터치 44 확장 */
.h2-chip:hover { border-color: var(--mk-teal); color: var(--mk-teal); }
.h2-chip:active { transform: scale(.98); }

/* ---- 섹션 리듬 : Hero 다음 56 · 이후 40~56 ---- */
.h2-sec { margin-top: var(--mk-sp-8); }
.h2-continue-wrap { margin-top: var(--mk-sp-14); }
.h2-main { padding-bottom: var(--mk-sp-18); }
.h2-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--mk-sp-4); }
.h2-sec-head h2 { font: var(--mk-t-h2); margin: 0; }
.h2-season { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-left: 8px; font-weight: 500; }
.h2-meta { font: var(--mk-t-caption); color: var(--mk-text-secondary); }

/* ---- Continue Editing : 단일 카드 680 (시선 축 = 입력창) ---- */
.h2-continue { display: flex; align-items: center; gap: var(--mk-sp-4); width: 100%; max-width: 680px; margin: 0 auto; text-align: left;
  background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5);
  cursor: pointer; transition: border-color var(--mk-mo-fast) var(--mk-mo-ease), box-shadow var(--mk-mo-fast) var(--mk-mo-ease); }
.h2-continue:hover { border-color: var(--mk-teal); box-shadow: var(--mk-sh-subtle); }
.h2-continue:hover .h2-arrow { transform: translateX(4px); }
.h2-cthumb { flex: none; width: 160px; height: 100px; border-radius: var(--mk-r-small); overflow: hidden;
  background: var(--mk-surface-muted); display: block; position: relative; }
.h2-cbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.h2-cap { font: var(--mk-t-caption); color: var(--mk-teal); }
.h2-ctitle { font: var(--mk-t-h2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-arrow { color: var(--mk-text-secondary); font-size: 18px; transition: transform var(--mk-mo-fast) var(--mk-mo-ease); }

/* ---- 그리드 카드 : 무보더 · 썸네일만 프레임 ---- */
.h2-row { display: grid; gap: var(--mk-sp-4); }
.h2-row.cards5 { grid-template-columns: repeat(5, 1fr); }
.h2-card { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-width: 0; }
.h2-cardthumb { display: block; position: relative; aspect-ratio: 16/10; border-radius: var(--mk-r-medium);
  border: 1px solid var(--mk-border); background: var(--mk-surface); overflow: hidden;
  transition: box-shadow var(--mk-mo-fast) var(--mk-mo-ease), transform var(--mk-mo-fast) var(--mk-mo-ease); }
.h2-card:hover .h2-cardthumb { box-shadow: var(--mk-sh-subtle); transform: scale(1.02); }
.h2-card:active .h2-cardthumb { transform: scale(.99); }
.h2-cardtitle { display: block; font: var(--mk-t-h3); margin-top: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-thumb-fit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.h2-thumb-fit svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-thumb-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: var(--mk-t-h1); color: var(--mk-text-secondary); background: var(--mk-surface-muted); }
.h2-badge-ai { position: absolute; top: 8px; left: 8px; font: var(--mk-t-caption); color: var(--mk-teal);
  background: var(--mk-teal-soft); border-radius: var(--mk-r-pill); padding: 3px 8px; }
.h2-badge-ai.in { position: static; margin-left: 6px; vertical-align: 2px; }
.h2-badge-ratio { position: absolute; bottom: 8px; left: 8px; font: var(--mk-t-caption); color: var(--mk-text-secondary);
  background: rgba(255, 255, 255, .88); border: 1px solid var(--mk-border); border-radius: var(--mk-r-small); padding: 2px 6px; }

/* ---- Empty State : 초대장 (일러스트 금지 — 타이포·여백만) ---- */
.h2-empty { text-align: center; margin-top: var(--mk-sp-14); }
.h2-empty-t { font: var(--mk-t-h2); margin: 0 0 var(--mk-sp-5); }
.h2-empty-list { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--mk-sp-2); }
.h2-empty-row { height: 48px; display: flex; align-items: center; gap: var(--mk-sp-3); padding: 0 var(--mk-sp-4);
  background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-medium);
  font: var(--mk-t-body); color: var(--mk-text-primary); cursor: pointer; text-align: left;
  transition: border-color var(--mk-mo-fast) var(--mk-mo-ease); animation: h2in var(--mk-mo-base) var(--mk-mo-ease) both; }
.h2-empty-row:nth-child(2) { animation-delay: 60ms; }
.h2-empty-row:nth-child(3) { animation-delay: 120ms; }
.h2-empty-row:hover { border-color: var(--mk-teal); }
.h2-empty-row .glyph { color: var(--mk-teal); }

/* ---- 검색 팔레트 : Home 위 유일한 레이어 ---- */
#h2Pal { position: fixed; inset: 0; z-index: var(--mk-z-modal); }
.h2-pal-dim { position: absolute; inset: 0; background: var(--mk-overlay);
  animation: h2dim var(--mk-mo-slow) var(--mk-mo-ease) both; }
@keyframes h2dim { from { opacity: 0; } to { opacity: 1; } }
.h2-pal { position: absolute; top: 20vh; left: 50%; transform: translateX(-50%); width: 560px; max-width: calc(100vw - 32px);
  background: var(--mk-surface); border-radius: var(--mk-r-large); box-shadow: var(--mk-sh-floating);
  animation: h2pal var(--mk-mo-slow) var(--mk-mo-ease) both; overflow: hidden; display: flex; flex-direction: column; }
@keyframes h2pal { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.h2-pal input { height: 52px; border: 0; outline: 0; border-bottom: 1px solid var(--mk-border); padding: 0 var(--mk-sp-4);
  font: var(--mk-t-body); background: none; }
.h2-pal-list { max-height: calc(44px * 8 + 40px); overflow-y: auto; padding: var(--mk-sp-2) 0; }
.h2-pal-g { display: block; font: var(--mk-t-caption); color: var(--mk-text-secondary); padding: 8px var(--mk-sp-4) 4px; }
.h2-pal-row { display: flex; align-items: center; gap: var(--mk-sp-3); width: 100%; height: 44px; padding: 0 var(--mk-sp-4);
  background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; text-align: left; }
.h2-pal-row .ic { color: var(--mk-text-secondary); width: 16px; text-align: center; }
.h2-pal-row b { font: var(--mk-t-body-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-pal-row small { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-left: auto; flex: none; }
.h2-pal-row.on { background: var(--mk-teal-soft); border-left-color: var(--mk-teal); }
.h2-pal-none { padding: var(--mk-sp-6) var(--mk-sp-4); font: var(--mk-t-body-sm); color: var(--mk-text-secondary); text-align: center; }
.h2-pal-hint { font: var(--mk-t-caption); color: var(--mk-text-disabled); padding: 8px var(--mk-sp-4); border-top: 1px solid var(--mk-border); }

/* ---- Preview 모달 내부 ---- */
.h2-pv h2 { font: var(--mk-t-h1); margin: 0 0 6px; }
.h2-pv-strip { display: flex; gap: var(--mk-sp-3); overflow-x: auto; margin: var(--mk-sp-4) 0; padding-bottom: 4px; }
.h2-pv-sc { flex: 0 0 120px; }
.h2-pv-sc .h2-thumb-fit.box { position: relative; display: block; aspect-ratio: 16/10; border: 1px solid var(--mk-border);
  border-radius: var(--mk-r-small); overflow: hidden; }
.h2-pv-sc small { font: var(--mk-t-caption); color: var(--mk-text-secondary); display: block; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2-pv-act { display: flex; gap: var(--mk-sp-2); justify-content: flex-end; margin-top: var(--mk-sp-4); }

/* ---- 포커스 (키보드만) ---- */
.h2 button:focus-visible, .h2-pal-row:focus-visible, .h2-pal input:focus-visible {
  outline: 2px solid var(--mk-teal); outline-offset: 2px; }
.h2-input input:focus-visible { outline: none; }                          /* 컨테이너 링이 대체 */

/* ---- Responsive : 1024 / 768 / 480 ---- */
@media (max-width: 1024px) {
  .h2 { padding: 0 24px; }
  .h2-row.cards5 { grid-template-columns: repeat(4, 1fr); }
  .h2-row.cards5 .h2-card:nth-child(n+5) { display: none; }
}
@media (max-width: 768px) {
  .h2-nav .h2-link:first-child { display: none; }
  .h2-input { max-width: 90%; }
  .h2-chips { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
  .h2-chips::-webkit-scrollbar { display: none; }
  .h2-chip { flex: none; }
  .h2-row.cards5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
  .h2-row.cards5::-webkit-scrollbar { display: none; }
  .h2-row .h2-card { flex: 0 0 44%; scroll-snap-align: start; display: block !important; }
}
@media (max-width: 480px) {
  .h2 { padding: 0 16px; }
  .h2-q { font-size: 24px; line-height: 32px; }
  .h2-input { max-width: 100%; height: 52px; padding-left: 16px; }
  .h2-make { padding: 0; width: 40px; }
  .h2-make .tx { display: none; }
  .h2-make .ic { display: inline; font-size: 16px; }
  .h2-continue { flex-direction: column; align-items: stretch; }
  .h2-cthumb { width: 100%; height: auto; aspect-ratio: 16/10; }
  .h2-arrow { display: none; }
  .h2-pal { top: 0; left: 0; transform: none; width: 100%; max-width: none; border-radius: 0 0 var(--mk-r-large) var(--mk-r-large); }
  .h2-pal-hint { display: none; }
}

/* ---- Reduced Motion : 이동·스케일 제거, 페이드만 ---- */
@media (prefers-reduced-motion: reduce) {
  .h2-hero, .h2-sec, .h2-steps li, .h2-result, .h2-empty-row, .h2-pal, .h2-pal-dim {
    animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .h2-input, .h2-continue, .h2-card .h2-cardthumb, .h2-arrow, .h2-chip, .h2-make { transition: none !important; }
  .h2-hero.composing .h2-input { transform: none; }
  .h2-card:hover .h2-cardthumb { transform: none; }
}

/* ---- Review Mode 배지 ---- */
.ed-review-badge { font: var(--mk-t-caption); font-weight: 700; letter-spacing: .8px; color: var(--mk-coral);
  background: var(--mk-coral-soft); border-radius: var(--mk-r-pill); padding: 3px 9px; flex: none; }


/* ---- Review chromeless — 크롬 숨김, 에디터 풀화면 ---- */
body.pg-chromeless .pg-nav, body.pg-chromeless .pg-head { display: none; }
body.pg-chromeless .pg-shell { grid-template-columns: 1fr; }


/* ---- Scene Strip v2 — 실캔버스 미니 프리뷰 ---- */
.ed-mini { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ed-mini span { position: absolute; line-height: 1.25; white-space: pre-wrap; overflow: hidden; letter-spacing: -.1px; }
.ed-mini i { position: absolute; background: #C9D2DE; opacity: .5; border-radius: 2px; }
.ed-sc { width: 122px; flex: none; }
.ed-sc .frame { display: block; width: 100%; aspect-ratio: 16/9; border: 1.5px solid var(--mk-border); border-radius: var(--mk-r-small); overflow: hidden; position: relative; cursor: pointer; padding: 0; background: var(--mk-surface);
  transition: border-color var(--mk-mo-fast) var(--mk-mo-ease), box-shadow var(--mk-mo-fast) var(--mk-mo-ease), transform var(--mk-mo-fast) var(--mk-mo-ease); }
.ed-sc .frame:hover { border-color: #C4CBD6; box-shadow: var(--mk-sh-subtle); transform: translateY(-1px); }
.ed-sc.on .frame { border-color: var(--mk-coral); box-shadow: 0 0 0 1.5px var(--mk-coral-soft); }
.ed-sc .num { position: absolute; top: 4px; left: 4px; z-index: 1; font: var(--mk-t-caption); font-weight: 700; color: var(--mk-text-secondary); background: rgba(255, 255, 255, .88); border-radius: 4px; padding: 0 5px; line-height: 15px; }
.ed-sc.on .num { background: var(--mk-coral); color: #fff; }
.ed-sc .dur { position: absolute; bottom: 4px; right: 4px; z-index: 1; font: var(--mk-t-caption); font-weight: 600; background: rgba(31, 39, 51, .6); color: #fff; border-radius: 4px; padding: 0 5px; line-height: 15px; }
.ed-sc .nm { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: 4px; display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-sc.on .nm { color: var(--mk-text-primary); font-weight: 600; }
.ed-sc .ed-sceneops { margin-top: 2px; }
.ed-strip .ed-strip-add { width: 60px; height: 69px; align-self: flex-start; }
@media (hover: hover) {
  .ed-sc .ed-sceneops { opacity: 0; }
  .ed-sc:hover .ed-sceneops, .ed-sc.on .ed-sceneops, .ed-sc:focus-within .ed-sceneops { opacity: 1; }
}

/* ---- Video Timeline v2 — 클립 실미리보기·전환 칩·트림 그립 ---- */
.ed-tl-block { padding: 0; overflow: hidden; height: 56px; background: var(--mk-surface); }
.ed-tl-block .ed-mini { position: absolute; inset: 0; opacity: .38; }
.ed-tl-block .tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; }
.ed-tl-block .tx b { font: var(--mk-t-caption); font-weight: 700; }
.ed-tl-block.on .ed-mini { opacity: .55; }
.ed-tl-block.on::after { content: ''; position: absolute; border-radius: 2px; z-index: 1; left: auto; right: 3px; top: 8px; bottom: 8px; width: 2.5px; height: auto; background: var(--mk-coral); opacity: .9; }
.ed-tl-block.on::before { content: ''; position: absolute; left: 3px; top: 8px; bottom: 8px; width: 2.5px; border-radius: 2px; background: var(--mk-coral); opacity: .9; z-index: 1; }
.ed-tl-tr { flex: none; align-self: center; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--mk-text-secondary); background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 50%; box-shadow: var(--mk-sh-subtle); }


/* ---- Editor 모바일 가드 — 데스크톱 전용 UX 안내 ---- */
.ed-mobile-guard { display: none; }
@media (max-width: 900px) {
  .ed > *:not(.ed-mobile-guard) { display: none !important; }
  .ed-mobile-guard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mk-sp-3);
    min-height: 70vh; text-align: center; padding: var(--mk-sp-7); }
  .ed-mobile-guard b { font: var(--mk-t-h1); }
  .ed-mobile-guard p { font: var(--mk-t-body); color: var(--mk-text-secondary); margin: 0 0 var(--mk-sp-3); }
}

/* ============================================================
   Editor UI Polish — Round 03  (상용 툴 완성도 레이어)
   기능·레이아웃 구조 무변 — Surface 계층·8pt 정렬·타이포 위계·
   마이크로 인터랙션·Selection·Timeline 시각 완성도만 상향.
   ============================================================ */
.ed {
  --ed-bg-workspace: #E7EAEF;   /* 가장 어두움 — 캔버스 무대 */
  --ed-bg-panel:     #FBFCFD;   /* 좌우 패널 */
  --ed-bg-rail:      #F6F8FA;   /* 좌측 레일 */
  --ed-bg-timeline:  #FAFBFC;   /* 하단 */
  --ed-hairline:     #E4E8EE;
  --ed-line-strong:  #D6DCE5;
  --ed-tr: 160ms;
  grid-template-rows: 56px 1fr auto;
}

/* ---- 7. Surface System — 명도 계층 (Toolbar > Panel > Rail > Timeline > Workspace) ---- */
.ed-toolbar { height: 56px; background: #FFFFFF; border-bottom: 1px solid var(--ed-hairline);
  box-shadow: 0 1px 2px rgba(20, 28, 40, .04); position: relative; z-index: 3; }
.ed-mainmenu { background: var(--ed-bg-rail); border-right: 1px solid var(--ed-hairline); }
.ed-detail { background: var(--ed-bg-panel); border-right: 1px solid var(--ed-hairline); }
.ed-props { background: var(--ed-bg-panel); border-left: 1px solid var(--ed-hairline); }
.ed-canvaswrap { background: var(--ed-bg-workspace); background-image: none; padding: var(--mk-sp-8); }
.ed-bottom { background: var(--ed-bg-timeline); border-top: 1px solid var(--ed-hairline);
  padding: var(--mk-sp-3) var(--mk-sp-4); position: relative; z-index: 2; box-shadow: 0 -1px 2px rgba(20, 28, 40, .03); }

/* ---- 1. Canvas 주인공 — 이중 자연광 그림자 + 헤어라인 링 ---- */
.ed-canvas { border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(20, 28, 40, .055),
              0 1px 2px rgba(20, 28, 40, .07),
              0 10px 28px rgba(20, 28, 40, .13),
              0 28px 56px -18px rgba(20, 28, 40, .16); }

/* ---- 2. Toolbar 계층 — Primary(내보내기) / Secondary(공유·미리보기) / Utility ---- */
.ed-toolbar .mk-btn.sm { height: 32px; border-radius: 8px; padding: 0 12px; }
.ed-toolbar .mk-iconbtn { width: 32px; height: 32px; border-radius: 8px; }
.ed-toolbar .mk-btn[data-ed="preview"], .ed-toolbar .mk-btn[data-ed="share"] {
  background: #FFFFFF; color: var(--mk-text-primary);
  border-color: var(--ed-line-strong) !important; box-shadow: 0 1px 1px rgba(20, 28, 40, .04); }
.ed-toolbar .mk-btn[data-ed="preview"]:hover, .ed-toolbar .mk-btn[data-ed="share"]:hover {
  background: var(--mk-surface-muted); border-color: #BFC8D4 !important; }
.ed-toolbar .mk-btn[data-ed="export"] { padding: 0 16px; box-shadow: 0 1px 2px rgba(46, 140, 127, .30); }
.ed-toolbar .mk-btn[data-ed="export"]:hover { box-shadow: 0 2px 8px rgba(46, 140, 127, .34); }
.ed-toolbar .mk-btn[data-ed="save"] { border-color: transparent !important; background: transparent; color: var(--mk-text-secondary); }
.ed-toolbar .mk-btn[data-ed="save"]:hover { background: var(--mk-surface-muted); color: var(--mk-text-primary); }
.ed-toolbar .mk-btn:active:not(:disabled) { transform: translateY(.5px); }
.ed-toolbar .mk-tabs { background: #EEF1F5; border-radius: 9px; padding: 3px; }
.ed-toolbar .mk-tab { border-radius: 7px; padding: 6px 16px; }
.ed-toolbar .fname { font-size: 13.5px; font-weight: 600; }
.ed-toolbar .savestate { display: inline-flex; align-items: center; gap: 5px; }
.ed-toolbar .savestate::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #A9B2BE; flex: none; }

/* ---- 공통 캡션 위계 ---- */
.ed-zone-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; color: #98A1AE; margin-bottom: 8px; }
.ed-props .ed-zone-cap { margin-bottom: 12px; }

/* ---- 3. Left Panel — 레일 카드화 + 삽입 어포던스 ---- */
.ed-mainmenu { padding: var(--mk-sp-2) 0 var(--mk-sp-3); gap: 4px; }
.ed-mainmenu button { width: 56px; height: 52px; border-radius: 10px; color: #535D6B;
  transition: background var(--ed-tr) var(--mk-mo-ease), color var(--ed-tr) var(--mk-mo-ease),
              transform var(--ed-tr) var(--mk-mo-ease), box-shadow var(--ed-tr) var(--mk-mo-ease); }
.ed-mainmenu button .ico svg { width: 20px; height: 20px; }
.ed-mainmenu button:hover { background: #ECEFF3; color: var(--mk-text-primary); transform: translateY(-1px); }
.ed-mainmenu button:active { transform: scale(.96); }
.ed-mainmenu button.on { background: #FFFFFF; color: var(--mk-teal);
  box-shadow: 0 1px 3px rgba(20, 28, 40, .08), 0 0 0 1px rgba(46, 140, 127, .20); }
.ed-mainmenu button.on::before { display: none; }
.ed-detail h3 { font-weight: 600; }
.ed-detail .ph-item { background: #FFFFFF; border-color: #E7EAF0; border-radius: 8px; padding: 12px;
  box-shadow: 0 1px 1px rgba(20, 28, 40, .04);
  transition: border-color var(--ed-tr) var(--mk-mo-ease), box-shadow var(--ed-tr) var(--mk-mo-ease),
              transform var(--ed-tr) var(--mk-mo-ease); }
.ed-detail .ph-item:hover { border-color: #CBD3DE; box-shadow: 0 2px 6px rgba(20, 28, 40, .08); transform: translateY(-1px); }
.ed-detail .ph-item:active { transform: translateY(0) scale(.985); }

/* ---- 4. Property Panel — Inspector 시스템 (8pt 리듬) ---- */
.ed-props h3 { font-size: 13.5px; font-weight: 600; padding-bottom: 12px; margin-bottom: 16px; border-color: var(--ed-hairline); }
.ed-props .fld { margin-bottom: 16px; }
.ed-props .fld label { font-size: 11px; color: #7A828F; margin-bottom: 4px; letter-spacing: .2px; }
.ed-props .row2 { gap: 8px; }
.ed-props .mk-input { height: 32px; border-radius: 8px; background: #F1F3F7; }
.ed-props textarea.mk-input { height: 56px; padding: 8px 10px; }
.ed-props .mk-input:hover { background: #FFFFFF; }
.ed-props .mk-input:focus { background: #FFFFFF; }
.ed-adv { margin: 16px 0 8px; padding-top: 8px; border-top: 1px solid var(--ed-hairline); }
.ed-adv summary { padding: 8px; margin: 0 -8px; }

/* ---- 6. Selection UI — 링 + 코너/변 핸들 ---- */
.ed-el { border-radius: 2px; }
.ed-el.sel { box-shadow: 0 0 0 1.5px var(--mk-coral), 0 0 0 4px rgba(232, 115, 90, .13); }
.ed-el .hd { width: 8px; height: 8px; border-radius: 2px; box-shadow: 0 1px 2px rgba(20, 28, 40, .18); }
.ed-el .hd.tm, .ed-el .hd.bm { width: 16px; height: 5px; border-radius: 3px; left: 50%; transform: translateX(-50%); }
.ed-el .hd.tm { top: -3px; } .ed-el .hd.bm { bottom: -3px; }
.ed-el .hd.ml, .ed-el .hd.mr { width: 5px; height: 16px; border-radius: 3px; top: 50%; transform: translateY(-50%); }
.ed-el .hd.ml { left: -3px; } .ed-el .hd.mr { right: -3px; }

/* ---- 캔버스 줌 컨트롤 ---- */
.ed-zoom { border: none; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 28, 40, .12), 0 0 0 1px rgba(20, 28, 40, .05); }
.ed-zoom button { height: 32px; }
.ed-zoom button + button { border-left: 1px solid var(--ed-hairline); }

/* ---- 5. Timeline — Design Strip ---- */
.ed-strip-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; }
.ed-strip-head .cap { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; color: #98A1AE; }
.ed-strip-head .prg { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.ed-strip-head .prg b { color: var(--mk-text-primary); font-weight: 700; }
.ed-strip { gap: 12px; padding: 4px 2px; }
.ed-sc { width: 148px; }
.ed-sc .frame { border-width: 1px; border-radius: 8px; box-shadow: 0 1px 2px rgba(20, 28, 40, .05);
  transition: border-color var(--ed-tr) var(--mk-mo-ease), box-shadow var(--ed-tr) var(--mk-mo-ease),
              transform var(--ed-tr) var(--mk-mo-ease); }
.ed-sc .frame:hover { border-color: #C4CCD8; box-shadow: 0 4px 12px rgba(20, 28, 40, .11); transform: translateY(-2px); }
.ed-sc.on .frame { border-color: var(--mk-coral);
  box-shadow: 0 0 0 2px rgba(232, 115, 90, .22), 0 3px 10px rgba(20, 28, 40, .10); }
.ed-sc .num { font-size: 10px; line-height: 16px; border-radius: 5px; background: rgba(255, 255, 255, .92); }
.ed-sc .dur { font-size: 10.5px; line-height: 17px; border-radius: 5px; background: rgba(24, 30, 40, .68); }
.ed-sc .nm { font-size: 12.5px; font-weight: 500; color: var(--mk-text-primary); margin-top: 6px; }
.ed-sc.on .nm { font-weight: 600; }
.ed-sceneops button { padding: 3px 7px; border-radius: 6px; }
.ed-strip .ed-strip-add { width: 72px; height: 84px; border-radius: 8px; }
.ed-strip-add:hover { transform: translateY(-1px); }

/* ---- 5. Timeline — Video ---- */
.ed-playbar { gap: 12px; margin-bottom: 12px; }
.ed-playbar .mk-iconbtn { width: 32px; height: 32px; border-radius: 50%; background: var(--mk-text-primary); color: #fff; font-size: 11px; }
.ed-playbar .mk-iconbtn:hover { background: #303B4B; color: #fff; }
.ed-playbar .track { height: 4px; }
.ed-timeline { gap: 6px; padding: 2px 2px 6px; }
.ed-tl-block { height: 64px; border-width: 1px; border-radius: 8px; box-shadow: 0 1px 2px rgba(20, 28, 40, .05);
  transition: border-color var(--ed-tr) var(--mk-mo-ease), box-shadow var(--ed-tr) var(--mk-mo-ease),
              transform var(--ed-tr) var(--mk-mo-ease), background var(--ed-tr) var(--mk-mo-ease); }
.ed-tl-block:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(20, 28, 40, .10); }
.ed-tl-block.on { background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(232, 115, 90, .20), 0 3px 8px rgba(20, 28, 40, .09); }
.ed-tl-block .tx { padding: 8px 12px; }
.ed-tl-block .tx b { font-size: 12px; }
.ed-tl-block .dur { font-size: 11px; font-weight: 600; }
.ed-tl-block.on::before, .ed-tl-block.on::after { width: 4px; border-radius: 3px; cursor: ew-resize; }
.ed-tl-tr { width: 22px; height: 22px; background: #FFFFFF; }

/* ---- 10. Micro Interaction — 포커스 링 통일 ---- */
.ed button:focus-visible, .ed .mk-input:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 2px; }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .ed-sc .frame, .ed-tl-block, .ed-mainmenu button, .ed-detail .ph-item, .ed-strip-add { transition: none !important; transform: none !important; }
}

/* ============================================================
   Editor UI Polish — Round 04  (Final Product Polish)
   레이아웃·기능 무변 — 디테일·일관성·첫인상만.
   ============================================================ */
/* ---- 6. Surface Depth 강화 — 명도차 확대 ---- */
.ed {
  --ed-bg-workspace: #E2E6EC;
  --ed-bg-panel:     #FAFBFD;
  --ed-bg-rail:      #F3F5F9;
  --ed-bg-timeline:  #F7F9FB;
}

/* ---- 3. Canvas Typography — 제목/본문 자연 구분 ---- */
.ed-canvas .ed-el { letter-spacing: -.015em; }
.ed-canvas .ed-el[style*="font-weight:700"] { letter-spacing: -.022em; }

/* ---- 2. Selection — 핸들 hover·커서·회전 핸들 ---- */
.ed-el .hd { pointer-events: auto; transition: background var(--ed-tr) var(--mk-mo-ease), transform var(--ed-tr) var(--mk-mo-ease); }
.ed-el .hd:hover { background: var(--mk-coral); }
.ed-el .hd.tl, .ed-el .hd.br { cursor: nwse-resize; }
.ed-el .hd.tr, .ed-el .hd.bl { cursor: nesw-resize; }
.ed-el .hd.tm, .ed-el .hd.bm { cursor: ns-resize; }
.ed-el .hd.ml, .ed-el .hd.mr { cursor: ew-resize; }
.ed-el .hd.tm:hover, .ed-el .hd.bm:hover { transform: translateX(-50%) scaleY(1.25); }
.ed-el .hd.ml:hover, .ed-el .hd.mr:hover { transform: translateY(-50%) scaleX(1.25); }
.ed-el .hd.rot { width: 11px; height: 11px; border-radius: 50%; left: 50%; top: -26px; transform: translateX(-50%); cursor: grab; }
.ed-el .hd.rot::before { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 1.5px; height: 12px; background: var(--mk-coral); opacity: .55; }
.ed-el .hd.rot:hover { transform: translateX(-50%) scale(1.15); }

/* ---- 1. Timeline 제품화 — 카드 상태 3분리 (Hover / Selected / Focus) ---- */
.ed-strip { gap: 8px; padding: 4px 2px 2px; }
.ed-sc { padding: 6px 6px 4px; border-radius: 10px;
  transition: background var(--ed-tr) var(--mk-mo-ease), box-shadow var(--ed-tr) var(--mk-mo-ease); }
.ed-sc:hover { background: rgba(255, 255, 255, .7); }
.ed-sc.on { background: #FFFFFF; box-shadow: 0 1px 3px rgba(20, 28, 40, .07), 0 0 0 1px var(--ed-hairline); }
.ed-sc .frame { box-shadow: 0 1px 2px rgba(20, 28, 40, .06); }
.ed-sc .frame:hover { transform: translateY(-1px); }
.ed-sc.on .frame { border-color: var(--mk-coral);
  box-shadow: 0 0 0 1.5px rgba(232, 115, 90, .30), 0 2px 8px rgba(20, 28, 40, .08); transform: none; }
.ed-sc .frame:focus-visible { outline: 2px solid var(--mk-teal); outline-offset: 2px; }
.ed-sc .num { top: 5px; left: 5px; box-shadow: 0 1px 2px rgba(20, 28, 40, .12); }
.ed-sc .dur { bottom: 5px; right: 5px; font-weight: 500; background: rgba(24, 30, 40, .55); }
.ed-sc .nm { font-size: 12.5px; margin-top: 6px; }
.ed-sc .ed-sceneops { margin-top: 3px; }
.ed-sceneops button { display: inline-flex; align-items: center; gap: 4px; }
.ed-sceneops button svg { flex: none; opacity: .75; }
.ed-strip .ed-strip-add { height: 96px; align-self: stretch; margin: 6px 0 0; }

/* ---- 4. Insert Card — 배경 변화 어포던스 ---- */
.ed-detail .ph-item:hover { background: #F6FBFA; }
.ed-detail .ph-item:active { background: #EEF7F5; }

/* ---- 5. Inspector 8pt 재점검 ---- */
.ed-props { padding: var(--mk-sp-4) var(--mk-sp-4) var(--mk-sp-6); }
.ed-props .row2 { margin-bottom: 16px; }
.ed-props .row2 .fld, .ed-props .row2 span { margin-bottom: 0; }
.ed-adv > div { padding-top: 12px; }
.ed-props .hint { margin-top: 24px; }

/* ---- 7. Icon Audit — 글리프 정렬 ---- */
.ed-zoom button { display: inline-flex; align-items: center; justify-content: center; }
.ed-zoom button svg { display: block; }
.ed-playbar .mk-iconbtn svg { display: block; margin-left: 1px; }
.ed-tl-tr svg { display: block; }

/* ---- 9. Placeholder 제품화 — 이미지 영역 ---- */
.ed-el.img-ph { border: none; border-radius: 6px; color: #8792A1; gap: 6px; flex-direction: column;
  background: linear-gradient(145deg, #EEF1F6, #E3E8EF); box-shadow: inset 0 0 0 1px rgba(20, 28, 40, .05); }
.ed-el.img-ph::before { content: ''; width: 26px; height: 26px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238792A1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.7'/%3E%3Cpath d='M4.5 17l4.5-4.5 3.5 3.5 3-3 4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.ed-mini i { background: linear-gradient(145deg, #E8ECF2, #DDE3EB); opacity: .85; border-radius: 3px; }

/* ---- 8. Motion Rule 통일 — 160ms ease-out ---- */
.ed-adv summary::before { display: inline-block; transition: transform var(--ed-tr) var(--mk-mo-ease); }
.ed-sceneops { transition: opacity var(--ed-tr) var(--mk-mo-ease); }

/* ============================================================
   Product Polish — Round 05  (Product Finish)
   기능 무변·레이아웃 유지 — Canvas First·프리미엄 샘플·브랜드 일관.
   ============================================================ */
/* ---- 1. Canvas First — 패널 최소화·표시 영역 확대 ---- */
.ed-mid { grid-template-columns: 64px 204px 1fr 236px; }
@media (max-width: 1180px) { .ed-mid { grid-template-columns: 64px 0 1fr 236px; } }
.ed-canvaswrap { padding: var(--mk-sp-7); }
.ed-detail { padding: var(--mk-sp-4) var(--mk-sp-3); }
.ed-props { padding: var(--mk-sp-4) var(--mk-sp-3) var(--mk-sp-6); }

/* ---- 2·6. Premium Sample — 컬러 영역·카드 렌더 ---- */
.ed-el.img-ph.has-fill { box-shadow: none; border-radius: 8px; }
.ed-el.img-ph.has-fill::before { display: none; }
.ed-el.img-ph:not(.has-fill) { border-radius: 8px; }
.ed-mini i { border-radius: 2px; }

/* ---- 6. Showcase — 첫 페인트는 항상 선명 (등장 모션은 요소 인터랙션으로 한정) ---- */

/* ---- 3. Brand Identity — 회색 속 포인트 일관 (teal=활성/포커스, coral=선택/타임라인) ---- */
.ed-toolbar .mk-tab { transition: background var(--ed-tr) var(--mk-mo-ease), color var(--ed-tr) var(--mk-mo-ease), box-shadow var(--ed-tr) var(--mk-mo-ease); }
.ed-toolbar .mk-tab.on { color: var(--mk-teal); }
.ed--review .savestate::before { background: var(--mk-coral); }
.ed-zoom button[data-zoom="fit"]:hover { color: var(--mk-teal); }
.ed-playbar .track i, .ed-playbar .track i::after { background: var(--mk-coral); }

/* ---- 4. Icon Polish — 옵티컬 정렬·hover ---- */
.ed-mainmenu button .ico svg { transition: transform var(--ed-tr) var(--mk-mo-ease); }
.ed-mainmenu button:hover .ico svg { transform: translateY(-.5px); }
.ed-sceneops button:hover svg { opacity: 1; }
.ed-tl-tr:hover { color: var(--mk-teal); border-color: var(--mk-teal); }
.ed-tl-tr { transition: color var(--ed-tr) var(--mk-mo-ease), border-color var(--ed-tr) var(--mk-mo-ease); }

/* ---- 5. Motion Polish — 잔여 전이 통일 (150~180ms ease-out) ---- */
.ed-zoom { transition: box-shadow var(--ed-tr) var(--mk-mo-ease); }
.ed-props .mk-input, .ed-detail .ph-item, .ed-adv summary { transition-duration: var(--ed-tr); }


/* ============================================================
   Product Experience — Round 06  (Brand Experience)
   기능·레이아웃 무변 — 타이포·모션·서피스·하이라이트로 브랜드.
   ============================================================ */
/* ---- 4. Interaction — 빠름이 아니라 부드러움 (180ms·소프트 커브 전면) ---- */
.ed { --ed-tr: 180ms; --mk-mo-ease: cubic-bezier(.22, .68, .3, 1); --mk-mo-fast: 150ms; }

/* ---- 3. Canvas Experience — 창작 공간 (라이팅 + 도트 그리드) ---- */
.ed-canvaswrap { background:
    radial-gradient(circle at 1px 1px, rgba(31, 39, 51, .05) 1px, transparent 1.6px) 0 0 / 24px 24px,
    radial-gradient(ellipse 64% 54% at 50% 42%, #ECEFF3 0%, var(--ed-bg-workspace) 74%); }
.ed-canvas { border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(20, 28, 40, .05),
              0 1px 2px rgba(20, 28, 40, .06),
              0 12px 32px rgba(20, 28, 40, .13),
              0 32px 64px -20px rgba(20, 28, 40, .18); }

/* ---- 1. Identity — 워드마크(캡션 크기)·브랜드 헤어라인 (리뷰=쇼케이스 한정) ---- */
.ed-brandmark { font: 800 11px/1 var(--mk-font); letter-spacing: 1.6px; color: var(--mk-text-primary);
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding-right: 2px; }
.ed-brandmark::before { content: ''; width: 7px; height: 7px; border-radius: 2px;
  background: linear-gradient(135deg, var(--mk-teal) 0 50%, var(--mk-coral) 50% 100%); }
.ed--review .ed-toolbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--mk-teal), var(--mk-coral)); opacity: .34; }
.ed-toolbar .fname { letter-spacing: -.01em; }

/* ---- 5. Micro Details — 1px 감사 ---- */
.ed-toolbar { padding: 0 var(--mk-sp-4) 0 var(--mk-sp-3); }
.ed-review-badge { margin-left: 2px; }
.ed-strip-head { padding: 0 4px; margin-bottom: 8px; }
.ed-sc.on { box-shadow: 0 1px 4px rgba(20, 28, 40, .08), 0 0 0 1px var(--ed-hairline); }
.ed-sc .frame { border-color: #E1E5EC; }
.ed-sceneops { gap: 6px; }
.ed-zoom { right: 20px; bottom: 16px; }
.ed-props .fld label { line-height: 1.2; }
.ed-adv summary::before { width: 12px; display: inline-block; }
.ed-el.img-ph:not(.has-fill) { box-shadow: inset 0 0 0 1px rgba(20, 28, 40, .045); }
.ed-mainmenu button .nm, .ed-mainmenu button { letter-spacing: .1px; }
.ed-tl-block { border-color: #E1E5EC; }

/* ---- Round 08: 풀블리드 요소가 캔버스 radius를 존중 ---- */
.ed-canvas { overflow: hidden; }

/* ============================================================
   Round 11 — Library (Premium Template Browser)
   원칙: 카드는 얇게, 템플릿이 주인공. 테두리 1px · 그림자 최소.
   ============================================================ */
.lb-shell{display:flex;flex-direction:column;gap:var(--mk-sp-6)}

/* Hero + Search */
.lb-hero{padding:var(--mk-sp-8) 0 var(--mk-sp-2);text-align:center}
.lb-hero h2{font:var(--mk-t-display);letter-spacing:-.4px;margin-bottom:var(--mk-sp-5)}
.lb-search{display:flex;align-items:center;gap:var(--mk-sp-2);background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-pill);padding:0 var(--mk-sp-4);height:38px}
.lb-search input{flex:1;min-width:0;border:none;outline:none;background:none;font:var(--mk-t-body-sm);color:var(--mk-text-primary)}
.lb-search.big{height:52px;max-width:620px;margin:0 auto;box-shadow:var(--mk-sh-subtle)}
.lb-search.big input{font:var(--mk-t-body)}
.lb-search.big:focus-within{border-color:var(--mk-teal);box-shadow:0 0 0 3px var(--mk-teal-soft)}
.lb-recentq{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:var(--mk-sp-3)}
.lb-recentq small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.lb-recentq button{font:var(--mk-t-caption);border:1px solid var(--mk-border);background:var(--mk-surface);border-radius:var(--mk-r-pill);padding:3px 10px;color:var(--mk-text-secondary);cursor:pointer}
.lb-recentq button:hover{border-color:var(--mk-teal);color:var(--mk-teal)}

/* Category */
.lb-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:var(--mk-sp-3)}
.lb-cat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--mk-sp-4);background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);cursor:pointer;text-align:left;transition:border-color var(--mk-mo-fast) var(--mk-mo-ease),transform var(--mk-mo-fast) var(--mk-mo-ease)}
.lb-cat:hover{border-color:var(--mk-teal);transform:translateY(-1px)}
.lb-cat .ico{font-size:17px;color:var(--mk-teal);line-height:1;margin-bottom:6px}
.lb-cat b{font:var(--mk-t-h3)}
.lb-cat small{font:var(--mk-t-caption);color:var(--mk-text-secondary);line-height:1.45}
.lb-cat em{position:absolute;top:14px;right:14px;font:var(--mk-t-caption);font-style:normal;color:var(--mk-text-secondary)}

/* Rails */
.lb-rail header{display:flex;align-items:baseline;gap:var(--mk-sp-3);margin-bottom:var(--mk-sp-3)}
.lb-rail h3{font:var(--mk-t-h2)}
.lb-rail header small{font:var(--mk-t-caption);color:var(--mk-text-secondary);flex:1}
.lb-rail .more{font:var(--mk-t-caption);border:none;background:none;color:var(--mk-teal);cursor:pointer;font-weight:600}
.lb-rail .track{display:flex;gap:var(--mk-sp-3);overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.lb-rail .track .lb-card{flex:none;width:216px;scroll-snap-align:start}

/* Card */
.lb-card{background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:border-color var(--mk-mo-fast) var(--mk-mo-ease),box-shadow var(--mk-mo-fast) var(--mk-mo-ease)}
.lb-card:hover{border-color:#CFD6DF;box-shadow:var(--mk-sh-floating)}
.lb-card .th{position:relative;aspect-ratio:16/10;background:var(--mk-surface-muted);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb-card .th svg{max-width:84%;max-height:84%;box-shadow:var(--mk-sh-subtle);border-radius:2px}
.lb-card .prem{position:absolute;top:8px;left:8px;font:var(--mk-t-caption);font-weight:700;letter-spacing:.5px;background:rgba(31,39,51,.86);color:#fff;border-radius:var(--mk-r-pill);padding:2px 8px;font-size:9.5px}
.lb-card .livedot{position:absolute;bottom:8px;left:9px;color:var(--mk-teal);font-size:8px}
.lb-card .fav{position:absolute;top:6px;right:8px;border:none;background:none;font-size:14px;color:#96A0AD;cursor:pointer;padding:2px}
.lb-card .fav.on{color:#E8B23A}
.lb-card .hov{position:absolute;inset:auto 0 0 0;display:flex;gap:6px;justify-content:center;padding:10px;background:linear-gradient(to top,rgba(20,26,34,.62),rgba(20,26,34,0));opacity:0;transition:opacity var(--mk-mo-fast) var(--mk-mo-ease)}
.lb-card:hover .hov{opacity:1}
.lb-card .mt{padding:10px 12px 12px}
.lb-card .mt b{font:var(--mk-t-h3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-card .mt small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}

/* Browse bar */
.lb-bar{display:flex;align-items:center;gap:var(--mk-sp-3);flex-wrap:wrap}
.lb-bar b{font:var(--mk-t-h1)}
.lb-bar .crumb{font:var(--mk-t-caption);background:var(--mk-teal-soft);color:var(--mk-teal);border-radius:var(--mk-r-pill);padding:3px 10px;font-weight:600}
.lb-bar .lb-search{flex:1;min-width:180px;max-width:320px;margin-left:auto}
.lb-back{font:var(--mk-t-body-sm);border:none;background:none;color:var(--mk-text-secondary);cursor:pointer;padding:0}
.lb-back:hover{color:var(--mk-teal)}
.lb-types{display:flex;gap:6px;flex-wrap:wrap}
.lb-chip{font:var(--mk-t-caption);border:1px solid var(--mk-border);background:var(--mk-surface);border-radius:var(--mk-r-pill);padding:4px 11px;color:var(--mk-text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.lb-chip:hover{border-color:#C6CDD7;color:var(--mk-text-primary)}
.lb-chip.on{background:var(--mk-text-primary);border-color:var(--mk-text-primary);color:#fff;font-weight:600}
.lb-chip.sw i{width:9px;height:9px;border-radius:50%;display:inline-block}
.lb-filters{display:flex;flex-direction:column;gap:8px;background:var(--mk-surface);border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);padding:var(--mk-sp-3) var(--mk-sp-4)}
.lb-filters .grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lb-filters .grp>span{font:var(--mk-t-caption);color:var(--mk-text-secondary);width:52px;flex:none;text-transform:uppercase;letter-spacing:.4px}
.lb-count{display:flex;align-items:center;gap:var(--mk-sp-3);font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.lb-count b{font:var(--mk-t-h3);color:var(--mk-text-primary)}
.lb-reset{font:var(--mk-t-caption);border:none;background:none;color:var(--mk-coral);cursor:pointer;font-weight:600}

/* Virtual grid */
.lb-vp{height:calc(100vh - 330px);min-height:420px;overflow-y:auto;overflow-x:hidden;contain:strict}
.lb-vp .sizer{position:relative;width:100%}
.lb-vp .layer{position:absolute;top:0;left:0;right:0}
.lb-vp .layer>.lb-card{position:absolute;top:0;left:0;height:198px;will-change:transform;contain:layout paint}
.lb-vp .layer>.lb-card .th{height:130px;flex:none;aspect-ratio:auto}
.lb-vp .layer>.lb-card .mt{height:68px;overflow:hidden}
.lb-vp .layer>.lb-card .mt small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-empty{grid-column:1/-1;text-align:center;padding:var(--mk-sp-10) 0;font:var(--mk-t-body-sm);color:var(--mk-text-secondary);border:1px dashed var(--mk-border);border-radius:var(--mk-r-medium)}

/* Preview modal */
.mk-modal.lb-wide{width:min(900px,94vw);max-width:none}
.lb-prev{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--mk-sp-5)}
.lb-prev .stage{border:1px solid var(--mk-border);border-radius:var(--mk-r-medium);overflow:hidden;background:#fff;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.lb-prev .stage svg{width:100%;height:100%}
.lb-prev .dots{display:flex;gap:6px;margin-top:var(--mk-sp-3);justify-content:center}
.lb-prev .dots button{font:var(--mk-t-caption);border:1px solid var(--mk-border);background:var(--mk-surface);border-radius:var(--mk-r-pill);padding:3px 10px;color:var(--mk-text-secondary);cursor:pointer}
.lb-prev .dots button.on{background:var(--mk-text-primary);border-color:var(--mk-text-primary);color:#fff}
.lb-prev .right h2{font:var(--mk-t-h1);display:flex;align-items:center;gap:8px}
.lb-prev .right h2 .prem{font:var(--mk-t-caption);font-weight:700;background:var(--mk-text-primary);color:#fff;border-radius:var(--mk-r-pill);padding:2px 9px;font-size:9.5px;letter-spacing:.5px}
.lb-prev .desc{font:var(--mk-t-body-sm);color:var(--mk-text-secondary);margin:6px 0 var(--mk-sp-3)}
.lb-prev .info{width:100%;border-collapse:collapse;margin-bottom:var(--mk-sp-3)}
.lb-prev .info th{font:var(--mk-t-caption);color:var(--mk-text-secondary);text-align:left;padding:5px 10px 5px 0;white-space:nowrap;font-weight:500}
.lb-prev .info td{font:var(--mk-t-body-sm);padding:5px 0}
.lb-prev .info tr+tr th,.lb-prev .info tr+tr td{border-top:1px solid var(--mk-surface-muted)}
.lb-prev .warn{font:var(--mk-t-caption);color:var(--mk-text-secondary);background:var(--mk-surface-muted);border-radius:var(--mk-r-small);padding:8px 10px;margin-bottom:var(--mk-sp-3)}
.lb-prev .acts{display:flex;flex-direction:column;gap:var(--mk-sp-2)}
.lb-prev .acts>.mk-btn{width:100%;justify-content:center}
.lb-prev .acts .row{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:820px){.lb-prev{grid-template-columns:1fr}.lb-bar .lb-search{max-width:none;margin-left:0;order:9}}

/* ============================================================
   Round 12 — AI Canvas Assistant (AI Dock · Chart/Table 요소)
   ============================================================ */
.ed-aidock { display: flex; flex-direction: column; gap: 10px; }
.ed-aidock h3 { margin-bottom: 0; }

.aid-ctx { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border: 1px solid var(--mk-border);
  border-radius: 6px; background: var(--mk-surface-2); }
.aid-ctx span { font: var(--mk-t-caption); color: var(--mk-text-secondary); letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aid-ctx b { font: var(--mk-t-body-sm); font-weight: 600; color: var(--mk-text-primary); }
.aid-ctx em { font: var(--mk-t-caption); font-style: normal; color: var(--mk-teal, #2E8C7F); }

.aid-log { flex: 1; min-height: 96px; max-height: 210px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; padding: 9px; border: 1px solid var(--mk-border); border-radius: 6px; background: var(--mk-surface-1); }
.aid-empty { font: var(--mk-t-caption); color: var(--mk-text-tertiary, var(--mk-text-secondary)); line-height: 1.6; text-align: center; padding: 14px 4px; }
.aid-msg { font: var(--mk-t-caption); line-height: 1.55; padding: 6px 8px; border-radius: 5px; word-break: break-word; }
.aid-msg.me { background: var(--mk-surface-3, #EEF1F5); color: var(--mk-text-primary); align-self: flex-end; max-width: 92%; }
.aid-msg.ai { display: flex; gap: 6px; color: var(--mk-text-secondary); background: transparent; padding-left: 0; }
.aid-msg.ai.err { color: var(--mk-coral, #E8735A); }
.aid-dot { flex: 0 0 auto; width: 5px; height: 5px; margin-top: 6px; border-radius: 50%; background: var(--mk-teal, #2E8C7F); }
.aid-msg.ai.err .aid-dot { background: var(--mk-coral, #E8735A); }

.aid-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.aid-chip { font: var(--mk-t-caption); padding: 4px 8px; border: 1px solid var(--mk-border); border-radius: 999px;
  background: var(--mk-surface-1); color: var(--mk-text-secondary); cursor: pointer; transition: all var(--mk-motion, 180ms) var(--mk-ease, ease); }
.aid-chip:hover { border-color: var(--mk-teal, #2E8C7F); color: var(--mk-teal, #2E8C7F); background: var(--mk-surface-2); }

.aid-input { display: flex; gap: 6px; }
.aid-input .mk-input { flex: 1; min-width: 0; }
.aid-hist { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.aid-hist summary { cursor: pointer; padding: 3px 0; }
.aid-hist ol { margin: 4px 0 0 16px; display: flex; flex-direction: column; gap: 2px; }

/* Canvas 데이터 요소 */
.ed-el.ed-data { display: block; overflow: visible; }
.ed-el.ed-data svg { overflow: visible; }
.ed-tbl { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px; }
.ed-tbl b { font-size: 1.5em; font-weight: 700; }
.ed-tbl table { font-size: .95em; }

/* ============================================================
   Round 13 — Brand System Workspace (#/brand)
   좌 목록 260 · 중 편집 1fr · 우 Preview 360
   ============================================================ */
.bd-wrap { display:grid; grid-template-columns:260px 1fr 360px; height:100%; min-height:0;
  background:var(--mk-surface-muted); font:var(--mk-t-body, 400 13px/1.6 var(--mk-font)); }
.bd-empty { padding:var(--mk-sp-8); color:var(--mk-text-secondary); }

/* ---- 좌: 목록 ---- */
.bd-list { background:var(--mk-surface); border-right:1px solid var(--mk-border); display:flex; flex-direction:column; min-height:0; overflow:auto; }
.bd-list-h { display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px; }
.bd-list-h b { font:var(--mk-t-h3); }
.bd-item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; border:0; background:none;
  text-align:left; cursor:pointer; border-left:2px solid transparent; transition:background 160ms ease-out; }
.bd-item:hover { background:var(--mk-surface-muted); }
.bd-item.on { background:var(--mk-teal-soft); border-left-color:var(--mk-teal); }
.bd-item .sw { display:flex; gap:2px; flex:0 0 auto; }
.bd-item .sw i { width:9px; height:22px; border-radius:2px; display:block; }
.bd-item .nm { display:flex; flex-direction:column; min-width:0; flex:1; }
.bd-item .nm b { font-size:13px; font-weight:600; color:var(--mk-text-primary); }
.bd-item .nm small { font-size:11px; color:var(--mk-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-item .live { font-size:10px; font-weight:700; letter-spacing:.4px; color:var(--mk-teal);
  border:1px solid var(--mk-teal); border-radius:999px; padding:1px 6px; }
.bd-list-f { margin-top:auto; padding:12px 14px; display:flex; gap:6px; flex-wrap:wrap; border-top:1px solid var(--mk-border); }
.bd-mini, .bd-imp { font-size:11.5px; font-weight:600; color:var(--mk-text-secondary); background:var(--mk-surface);
  border:1px solid var(--mk-border); border-radius:var(--mk-r-small); padding:5px 9px; cursor:pointer; transition:all 160ms ease-out; }
.bd-mini:hover, .bd-imp:hover { color:var(--mk-teal); border-color:var(--mk-teal); }

/* ---- 중: 편집 ---- */
.bd-edit { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--mk-surface); }
.bd-tabs { display:flex; gap:2px; padding:10px 16px 0; border-bottom:1px solid var(--mk-border); overflow-x:auto; }
.bd-tabs button { border:0; background:none; padding:8px 11px 10px; font-size:12.5px; font-weight:600;
  color:var(--mk-text-secondary); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:all 160ms ease-out; }
.bd-tabs button:hover { color:var(--mk-text-primary); }
.bd-tabs button.on { color:var(--mk-teal); border-bottom-color:var(--mk-teal); }
.bd-editbody { flex:1; min-height:0; overflow:auto; padding:20px 22px 40px; }
.bd-form h4 { font:var(--mk-t-h3); margin:22px 0 10px; color:var(--mk-text-primary); }
.bd-form h4 small { font-weight:400; color:var(--mk-text-secondary); margin-left:6px; }
.bd-note { font-size:12px; line-height:1.65; color:var(--mk-text-secondary); background:var(--mk-surface-muted);
  border-radius:var(--mk-r-small); padding:10px 12px; margin:12px 0; }
.bd-grid2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 20px; }
.bd-row { display:flex; flex-direction:column; gap:5px; padding:8px 0; }
.bd-row > label { font-size:11px; font-weight:600; letter-spacing:.3px; color:var(--mk-text-secondary); }
.bd-row .ctl { display:flex; gap:6px; align-items:center; }
.bd-row small { font-size:11px; color:var(--mk-text-secondary); }
.bd-row input[type=text], .bd-row input[type=number], .bd-row select, .bd-form textarea {
  height:32px; border:1px solid var(--mk-border); border-radius:8px; padding:0 10px; font:inherit; font-size:12.5px;
  background:var(--mk-surface); color:var(--mk-text-primary); min-width:0; flex:1; transition:all 160ms ease-out; }
.bd-form textarea { height:auto; padding:8px 10px; line-height:1.55; resize:vertical; width:100%; }
.bd-row input:focus, .bd-row select:focus, .bd-form textarea:focus { outline:none; border-color:var(--mk-teal); box-shadow:0 0 0 3px var(--mk-teal-soft); }
.bd-static { font-size:12.5px; color:var(--mk-text-secondary); }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; }
.bd-col { display:flex; gap:6px; align-items:center; flex:1; }
.bd-col input[type=color] { width:36px; height:32px; padding:0; border:1px solid var(--mk-border); border-radius:8px; background:none; cursor:pointer; }
.bd-col .hex { flex:1; font-family:ui-monospace, monospace; text-transform:uppercase; }

.bd-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:18px 0 4px; }
.bd-btn { height:34px; padding:0 14px; border-radius:8px; border:1px solid var(--mk-border); background:var(--mk-surface);
  font:inherit; font-size:12.5px; font-weight:600; color:var(--mk-text-primary); cursor:pointer; transition:all 160ms ease-out; }
.bd-btn:hover { border-color:var(--mk-teal); color:var(--mk-teal); }
.bd-btn.pri { background:var(--mk-teal); border-color:var(--mk-teal); color:#fff; }
.bd-btn.pri:hover { filter:brightness(1.06); color:#fff; }
.bd-btn.danger:hover { border-color:var(--mk-danger); color:var(--mk-danger); }
.bd-msg { border-top:1px solid var(--mk-border); padding:10px 22px; font-size:12.5px; color:var(--mk-teal); background:var(--mk-teal-soft); }

/* 색 램프 */
.bd-ramp { display:flex; align-items:center; gap:12px; margin:6px 0; }
.bd-ramp > b { width:78px; font-size:11.5px; font-weight:600; color:var(--mk-text-secondary); text-transform:capitalize; }
.bd-ramp .ramp { display:flex; flex:1; border-radius:6px; overflow:hidden; border:1px solid var(--mk-border); }
.bd-ramp .ramp i { flex:1; height:34px; display:flex; align-items:flex-end; justify-content:center; }
.bd-ramp .ramp i em { font-size:8.5px; font-style:normal; color:rgba(255,255,255,.72); mix-blend-mode:difference; padding-bottom:2px; }

/* 로고 */
.bd-logos { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.bd-logo { border:1px solid var(--mk-border); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.bd-logo .box { width:100%; height:52px; display:flex; align-items:center; background:var(--mk-surface-muted); border-radius:6px; padding:8px; }
.bd-logo.dk .box { background:#111315; }
.bd-logo .box svg { max-width:100%; max-height:100%; }
.bd-logo b { font-size:12px; }
.bd-logo small { font-size:10.5px; color:var(--mk-text-secondary); }

/* 타이포 */
.bd-typerow { display:grid; grid-template-columns:88px 1fr 200px; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--mk-border); }
.bd-typerow > b { font-size:12px; color:var(--mk-text-secondary); }
.bd-typerow .f { display:flex; gap:6px; }
.bd-typerow .f input, .bd-typerow .f select { height:30px; border:1px solid var(--mk-border); border-radius:7px; padding:0 8px; font:inherit; font-size:12px; min-width:0; }
.bd-typerow .f input[type=text] { flex:1; }
.bd-typerow .f input[type=number] { width:62px; }
.bd-typerow .pv { color:var(--mk-text-primary); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* 컴포넌트 */
.bd-comp { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.bd-comp .c { border:1px solid var(--mk-border); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:5px; }
.bd-comp .c b { font-size:12px; }
.bd-comp .c label { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--mk-text-secondary); gap:6px; }
.bd-comp .c input { width:64px; height:26px; border:1px solid var(--mk-border); border-radius:6px; padding:0 6px; font:inherit; font-size:11.5px; }

/* 아이콘·이미지·차트 */
.bd-icons { display:flex; gap:14px; margin:16px 0; }
.bd-icons span { width:40px; height:40px; border:1px solid var(--mk-border); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.bd-icons svg { width:22px; height:22px; }
.bd-phs { display:flex; gap:8px; margin:14px 0; }
.bd-phs i { flex:1; height:56px; border-radius:8px; }
.bd-chartcols { display:flex; gap:6px; margin:8px 0 14px; }
.bd-chartcols i { flex:1; height:40px; border-radius:6px; display:flex; align-items:flex-end; justify-content:center; }
.bd-chartcols i em { font-size:9px; font-style:normal; color:rgba(255,255,255,.8); padding-bottom:3px; }
.bd-charttypes { display:flex; gap:6px; }
.bd-charttypes span { font-size:11px; font-weight:600; color:var(--mk-text-secondary); border:1px solid var(--mk-border); border-radius:999px; padding:3px 10px; }

/* 매핑 표 · 검증 */
.bd-map { width:100%; border-collapse:collapse; font-size:12px; }
.bd-map td { padding:7px 8px; border-bottom:1px solid var(--mk-border); color:var(--mk-text-secondary); }
.bd-map td:first-child { color:var(--mk-text-primary); font-weight:600; }
.bd-map .sw1 { display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-3px; margin-right:6px; border:1px solid var(--mk-border); }
.bd-vio { list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:5px; }
.bd-vio li { font-size:12px; line-height:1.5; padding:7px 10px; border-radius:7px; background:var(--mk-surface-muted); color:var(--mk-text-primary); }
.bd-vio li b { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.4px; margin-right:7px; padding:1px 6px; border-radius:999px; }
.bd-vio li.error { background:#FDF0EE; } .bd-vio li.error b { background:var(--mk-danger); color:#fff; }
.bd-vio li.warn { background:var(--mk-cream); } .bd-vio li.warn b { background:#B98A2B; color:#fff; }
.bd-vio li.ok { background:var(--mk-teal-soft); color:var(--mk-teal); }
.bd-json { font-family:ui-monospace, monospace; font-size:11px; line-height:1.5; background:#12161C; color:#C9D6DF;
  border-radius:10px; padding:14px; overflow:auto; max-height:280px; white-space:pre-wrap; word-break:break-all; }

/* ---- 우: Preview ---- */
.bd-prev { border-left:1px solid var(--mk-border); background:var(--mk-surface); display:flex; flex-direction:column;
  min-height:0; overflow:auto; padding:14px; gap:12px; }
.bd-prev-h { display:flex; align-items:center; justify-content:space-between; font:var(--mk-t-h3); }
.bd-prev-h .seg { display:flex; gap:2px; background:var(--mk-surface-muted); border-radius:999px; padding:2px; }
.bd-prev-h .seg button { border:0; background:none; font:inherit; font-size:11.5px; font-weight:600; color:var(--mk-text-secondary);
  padding:4px 11px; border-radius:999px; cursor:pointer; transition:all 160ms ease-out; }
.bd-prev-h .seg button.on { background:var(--mk-surface); color:var(--mk-text-primary); box-shadow:var(--mk-sh-subtle); }
.bd-brandcard { border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.bd-brandcard .lg { height:34px; display:flex; align-items:center; }
.bd-brandcard .lg svg { height:100%; width:auto; max-width:100%; }
.bd-brandcard .sw { display:flex; gap:6px; }
.bd-brandcard .sw i { width:34px; height:8px; border-radius:999px; }
.bd-scenes { display:flex; flex-direction:column; gap:12px; }
.bd-scenes .sc { display:flex; flex-direction:column; gap:4px; }
.bd-scenes .fr { border:1px solid var(--mk-border); border-radius:8px; overflow:hidden; }
.bd-scenes .sc small { font-size:10.5px; color:var(--mk-text-secondary); }
.bd-parts { display:flex; flex-direction:column; gap:14px; }
.bd-parts .p { display:flex; flex-direction:column; gap:6px; }
.bd-parts .p > b { font-size:10.5px; font-weight:700; letter-spacing:.5px; color:var(--mk-text-secondary); text-transform:uppercase; }
.bd-parts .p > span { display:flex; gap:8px; align-items:center; }
.bd-parts button, .bd-parts input { font:inherit; font-size:12.5px; cursor:pointer; }

@media (max-width:1200px) { .bd-wrap { grid-template-columns:220px 1fr 300px; } }

/* ============================================================
   Round 14 — Enterprise Team Workspace (tm-*) + Collab (cw-*)
   ============================================================ */
.tm-wrap { display:grid; grid-template-columns: 232px 1fr; gap:0; min-height: calc(100vh - 120px); }
.tm-tree { border-right:1px solid var(--mk-border); padding:16px 12px; display:flex; flex-direction:column; gap:8px; background:var(--mk-surface-1, #FAFAF8); }
.tm-org { display:flex; gap:10px; align-items:center; padding:8px 6px 14px; border-bottom:1px solid var(--mk-border); margin-bottom:4px; }
.tm-org b { font-size:13.5px; display:block; } .tm-org small { color:var(--mk-text-secondary); font-size:11px; }
.tm-orglogo { width:32px; height:32px; border-radius:9px; background:var(--mk-teal); color:#fff; display:grid; place-items:center; font-weight:800; }
.tm-ws { text-align:left; border:1px solid var(--mk-border); border-radius:10px; padding:8px 10px; background:#fff; cursor:pointer; font:inherit; }
.tm-ws.on { border-color:var(--mk-teal); box-shadow:0 0 0 1px var(--mk-teal); }
.tm-ws b { font-size:12.5px; display:block; } .tm-ws small { font-size:11px; color:var(--mk-text-secondary); }
.tm-folders { display:flex; flex-direction:column; gap:2px; }
.tm-folder { display:flex; justify-content:space-between; align-items:center; border:0; background:none; text-align:left; padding:6px 8px; border-radius:8px; cursor:pointer; font:inherit; font-size:12.5px; }
.tm-folder:hover { background:rgba(46,140,127,.08); } .tm-folder.on { background:rgba(46,140,127,.14); font-weight:600; }
.tm-folder em { font-style:normal; font-size:11px; color:var(--mk-text-secondary); }
.tm-actor { font:inherit; font-size:12px; padding:6px; border:1px solid var(--mk-border); border-radius:8px; }
.tm-main { padding:18px 22px; min-width:0; }
.tm-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--mk-border); padding-bottom:10px; margin-bottom:16px; }
.tm-tab { border:0; background:none; padding:7px 12px; border-radius:8px; cursor:pointer; font:inherit; font-size:12.5px; color:var(--mk-text-secondary); }
.tm-tab.on { background:var(--mk-teal); color:#fff; font-weight:600; }
.tm-tab em { font-style:normal; background:var(--mk-coral); color:#fff; border-radius:8px; font-size:10px; padding:1px 5px; margin-left:5px; }
.tm-body h3 { margin:2px 0 12px; font-size:15px; } .tm-body h4 { margin:14px 0 6px; font-size:12.5px; }
.tm-grid2 { display:grid; grid-template-columns: 1.5fr 1fr; gap:24px; }
.tm-stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.tm-stat { border:1px solid var(--mk-border); border-radius:10px; padding:10px 14px; min-width:86px; background:#fff; }
.tm-stat b { font-size:16px; display:block; } .tm-stat small { font-size:11px; color:var(--mk-text-secondary); }
.tm-table { width:100%; border-collapse:collapse; font-size:12.5px; background:#fff; }
.tm-table th { text-align:left; font-size:11px; color:var(--mk-text-secondary); border-bottom:1px solid var(--mk-border); padding:6px 8px; }
.tm-table td { border-bottom:1px solid var(--mk-border); padding:7px 8px; }
.tm-table tr.on td { background:rgba(46,140,127,.07); }
.tm-permwrap { max-height:300px; overflow:auto; border:1px solid var(--mk-border); border-radius:10px; }
.tm-perm td.y { color:var(--mk-teal); font-weight:700; text-align:center; } .tm-perm td.n { color:#C9C4BA; text-align:center; }
.tm-role { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; background:#EEE; }
.tm-role-owner { background:#173F39; color:#fff; } .tm-role-admin { background:var(--mk-teal); color:#fff; }
.tm-role-editor { background:#E3F1EE; color:#1C5A50; } .tm-role-commenter { background:#FBE9E4; color:#8A3B29; } .tm-role-viewer { background:#EFEDE7; color:#6B675E; }
.tm-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--c); margin-right:7px; }
.tm-row { display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.tm-row select { font:inherit; font-size:12px; padding:7px; border:1px solid var(--mk-border); border-radius:8px; }
.tm-msg { border-radius:9px; padding:8px 12px; font-size:12.5px; margin-bottom:12px; }
.tm-msg.ok { background:#E3F1EE; color:#1C5A50; } .tm-msg.no { background:#FBE9E4; color:#8A3B29; }
.tm-feed { display:flex; flex-direction:column; gap:6px; }
.tm-act { display:flex; gap:9px; align-items:baseline; font-size:12.5px; background:#fff; border:1px solid var(--mk-border); border-radius:9px; padding:7px 10px; }
.tm-act i { width:8px; height:8px; border-radius:50%; background:var(--c,#999); flex:none; align-self:center; }
.tm-act span { flex:1; min-width:0; } .tm-act em { font-style:normal; color:var(--mk-text-secondary); } .tm-act small { color:var(--mk-text-secondary); font-size:11px; flex:none; }
.tm-st-pending { color:var(--mk-warn,#D99A2B); font-weight:600; } .tm-st-accepted { color:var(--mk-teal); } .tm-st-rejected { color:#C0392B; }
.tm-cms { display:flex; flex-direction:column; gap:10px; max-width:620px; }
.tm-cm { border:1px solid var(--mk-border); border-radius:11px; padding:10px 13px; background:#fff; }
.tm-cm.done { opacity:.55; } .tm-cm p { margin:6px 0; font-size:13px; }
.tm-cm-h { display:flex; gap:8px; align-items:baseline; font-size:12px; } .tm-cm-h em { font-style:normal; color:var(--mk-text-secondary); } .tm-cm-h small { margin-left:auto; color:var(--mk-text-secondary); }
.tm-mention { color:var(--mk-teal); }
.tm-reply { font-size:12px; border-left:2px solid var(--mk-border); padding:4px 0 4px 10px; margin:4px 0; } .tm-reply small { color:var(--mk-text-secondary); margin-left:6px; }
.tm-cm-a { display:flex; gap:6px; margin-top:6px; }
.tm-verdict { font-style:normal; font-weight:700; padding:1px 8px; border-radius:12px; font-size:11px; }
.tm-v-approve { background:#E3F1EE; color:#1C5A50; } .tm-v-reject { background:#FBE9E4; color:#8A3B29; } .tm-v-changes { background:#FDF3DE; color:#8A6A1F; }
.tm-auto { font-style:normal; font-size:10px; background:#EFEDE7; border-radius:8px; padding:1px 6px; color:#6B675E; }
.tm-diff { border:1px dashed var(--mk-teal); border-radius:10px; padding:10px 13px; font-size:12.5px; margin-bottom:12px; background:rgba(46,140,127,.05); }
.tm-difft { font-size:12px; color:var(--mk-text-secondary); margin-top:4px; }
.tm-export { font-size:10.5px; background:#1F2733; color:#D7E3DF; border-radius:10px; padding:12px; max-height:180px; overflow:auto; margin-bottom:12px; }
.tm-sr { font-size:12.5px; padding:5px 8px; border-bottom:1px solid var(--mk-border); } .tm-sr small { color:var(--mk-text-secondary); margin-left:6px; }
.tm-srs { max-width:560px; }
.mk-btn.sm { height:26px; padding:0 10px; font-size:11.5px; }

/* ---- Collab overlay (에디터 위 확장 — 기존 스타일 무변) ---- */
.cw-presence { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:6px 2px 10px; font-size:11.5px; }
.cw-chip { display:inline-flex; gap:6px; align-items:center; border:1px solid var(--mk-border); border-radius:20px; padding:3px 10px 3px 6px; background:#fff; }
.cw-chip i { width:8px; height:8px; border-radius:50%; background:var(--c); }
.cw-chip em { font-style:normal; color:var(--mk-text-secondary); font-size:10.5px; }
.cw-lockbadge { font-size:11px; color:var(--mk-text-secondary); }
.cw-review { background:#FDF3DE; color:#8A6A1F; font-weight:700; border-radius:8px; padding:3px 10px; }
.cw-cursors { position:absolute; inset:0; pointer-events:none; z-index:40; }
.cw-cur { position:absolute; transform:translate(-2px,-2px); display:flex; gap:4px; align-items:flex-start; transition:left .9s ease, top .9s ease; }
.cw-cur b { font-size:10px; background:var(--c); color:#fff; border-radius:4px 10px 10px 10px; padding:2px 7px; font-weight:600; white-space:nowrap; }
.cw-type { font-size:10px; background:#fff; border:1px solid var(--c); color:#333; border-radius:8px; padding:2px 7px; white-space:nowrap; }

/* ============================================================
   Round 15 — Universal Asset Platform (dm-*)
   ============================================================ */
.dm-wrap { display:grid; grid-template-columns: 216px 1fr 300px; min-height: calc(100vh - 120px); gap:0; }
.dm-left { border-right:1px solid var(--mk-border); padding:14px 10px; display:flex; flex-direction:column; gap:14px; background:var(--mk-surface-1, #FAFAF8); overflow:auto; }
.dm-sec { display:flex; flex-direction:column; gap:2px; }
.dm-h { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--mk-text-3, #8A8F98); text-transform:uppercase; margin:6px 2px 4px; }
.dm-nav { display:flex; align-items:center; gap:6px; text-align:left; padding:6px 8px; border:0; background:transparent; border-radius:8px; cursor:pointer; font-size:13px; color:var(--mk-text-1, #23262B); }
.dm-nav:hover { background:var(--mk-surface-2, #F1F1EE); }
.dm-nav.on { background:var(--mk-accent-soft, #E8EAF6); font-weight:600; }
.dm-nav.dim { color:var(--mk-text-3, #8A8F98); }
.dm-nav-c { margin-left:auto; font-size:11px; color:var(--mk-text-3, #8A8F98); }
.dm-store { font-size:11px; color:var(--mk-text-3, #8A8F98); line-height:1.7; border-top:1px dashed var(--mk-border); padding-top:10px; }
.dm-mid { padding:16px 18px; overflow:auto; }
.dm-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.dm-q { flex:1; min-width:220px; }
.dm-views { display:flex; gap:4px; }
.dm-meta-line { font-size:12px; color:var(--mk-text-3, #8A8F98); margin:10px 2px; }
.dm-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.dm-grid.large { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.dm-grid.list { display:flex; flex-direction:column; gap:4px; }
.dm-card { border:1px solid var(--mk-border); border-radius:12px; overflow:hidden; cursor:pointer; background:#fff; transition:box-shadow .15s, transform .15s; }
.dm-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-1px); }
.dm-card.on { outline:2px solid var(--mk-accent, #4A54A8); }
.dm-th { position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.dm-card.lg .dm-th { aspect-ratio:16/10; }
.dm-th-ic { font-size:30px; opacity:.85; }
.dm-th-brand, .dm-th-pin { position:absolute; left:6px; top:6px; font-size:12px; }
.dm-th-pin { left:auto; right:30px; }
.dm-star { position:absolute; right:6px; top:4px; border:0; background:transparent; cursor:pointer; font-size:15px; color:#B8860B; }
.dm-star.lg { position:static; font-size:17px; }
.dm-card-b { padding:8px 10px; }
.dm-card-n { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-card-m { font-size:11px; color:var(--mk-text-3, #8A8F98); margin-top:2px; }
.dm-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--mk-border); border-radius:9px; cursor:pointer; background:#fff; position:relative; }
.dm-row.on { outline:2px solid var(--mk-accent, #4A54A8); }
.dm-row-th { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.dm-row-name { flex:1; font-size:13px; font-weight:600; }
.dm-row-kind, .dm-row-use { font-size:11px; color:var(--mk-text-3, #8A8F98); }
.dm-row .dm-star { position:static; }
.dm-more { margin:16px auto 0; display:block; }
.dm-ins { border-left:1px solid var(--mk-border); padding:14px; overflow:auto; display:flex; flex-direction:column; gap:10px; background:#fff; }
.dm-ins-empty { color:var(--mk-text-3, #8A8F98); font-size:13px; text-align:center; margin-top:60px; line-height:1.8; }
.dm-prev { aspect-ratio:16/10; border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative; cursor:zoom-in; }
.dm-prev-ic { font-size:38px; }
.dm-prev-zoom { position:absolute; right:8px; bottom:8px; font-size:11px; background:rgba(255,255,255,.85); border-radius:6px; padding:2px 7px; }
.dm-ins-name { font-size:15px; font-weight:700; display:flex; align-items:center; gap:4px; }
.dm-ins-name .dm-star { margin-left:auto; }
.dm-ins-name .dm-star + .dm-star { margin-left:0; }
.dm-tabs { display:flex; gap:2px; border-bottom:1px solid var(--mk-border); }
.dm-tab { border:0; background:transparent; padding:6px 9px; font-size:12px; cursor:pointer; color:var(--mk-text-3, #8A8F98); border-bottom:2px solid transparent; }
.dm-tab.on { color:var(--mk-text-1, #23262B); font-weight:700; border-bottom-color:var(--mk-accent, #4A54A8); }
.dm-ins-body { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.dm-dl { display:grid; grid-template-columns:76px 1fr; gap:4px 8px; margin:0; font-size:12px; }
.dm-dl dt { color:var(--mk-text-3, #8A8F98); }
.dm-dl dd { margin:0; word-break:break-all; }
.dm-mono { font-family:ui-monospace, monospace; font-size:11px; color:var(--mk-text-2, #4C525C); }
.dm-dim { color:var(--mk-text-3, #8A8F98); font-size:12px; }
.dm-colors { display:flex; align-items:center; gap:6px; }
.dm-sw { width:20px; height:20px; border-radius:6px; border:1px solid rgba(0,0,0,.08); }
.dm-scope { width:100%; }
.dm-w100 { width:100%; }
.dm-out { background:var(--mk-surface-2, #F1F1EE); border-radius:8px; padding:8px 10px; font-size:11px; white-space:pre-wrap; font-family:ui-monospace, monospace; }
.dm-ver { display:flex; align-items:center; gap:8px; font-size:12px; padding:4px 0; border-bottom:1px dashed var(--mk-border); }
.dm-ver span:first-child { flex:1; }
.dm-simrow { display:flex; gap:6px; }
.dm-sim { width:44px; height:44px; border-radius:9px; border:1px solid var(--mk-border); cursor:pointer; font-size:17px; }
.dm-fs { position:fixed; inset:0; background:rgba(250,250,248,.96); z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.dm-fs.dark { background:rgba(20,22,26,.96); }
.dm-fs-stage { width:min(70vw, 760px); aspect-ratio:16/10; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:600; }
.dm-fs-ic { font-size:54px; }
.dm-fs-bar { display:flex; gap:8px; }
@media (max-width: 900px) { .dm-wrap { grid-template-columns:1fr; } .dm-left, .dm-ins { border:0; } }

/* ============ Round 17 · Plugin Platform ============ */
.pl-wrap{padding:18px 22px;max-width:1180px;margin:0 auto}
.pl-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pl-msg{font-size:12.5px;padding:5px 10px;border-radius:8px}
.pl-msg.ok{background:#E8F4EE;color:#1E6B4F}.pl-msg.no{background:#FBE9E7;color:#B3392B}
.pl-storehead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pl-chips{display:flex;gap:6px;flex-wrap:wrap}
.pl-org{font-size:12px;color:var(--ink-2,#5A6472)}.pl-org select{margin-left:4px;font-size:12px;padding:4px 6px;border-radius:8px;border:1px solid var(--line,#E2E6EC)}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pl-card{background:#fff;border:1px solid var(--line,#E2E6EC);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .18s}
.pl-card:hover{box-shadow:0 4px 18px rgba(30,40,60,.08)}
.pl-card.pl-private{border-style:dashed;background:#FCFAF4}
.pl-card-top{display:flex;gap:10px;align-items:center}
.pl-ico{font-size:22px;width:38px;height:38px;display:grid;place-items:center;background:#F3F5F8;border-radius:10px;flex:none}
.pl-name b{display:block;font-size:14px}.pl-name small{color:var(--ink-3,#8891A0);font-size:11.5px}
.pl-desc{font-size:12.5px;color:var(--ink-2,#5A6472);margin:0;line-height:1.5}
.pl-meta{display:flex;gap:10px;font-size:11px;color:var(--ink-3,#8891A0);flex-wrap:wrap}
.pl-stars{color:#C89B2A;letter-spacing:1px}
.pl-perms{display:flex;gap:4px;flex-wrap:wrap}
.pl-perm{font-size:10px;background:#EEF3F0;color:#2A6B58;border-radius:6px;padding:2px 6px}
.pl-actions{display:flex;gap:6px;margin-top:auto}
.pl-inst{background:#fff;border:1px solid var(--line,#E2E6EC);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.pl-inst-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-inst-head small{color:var(--ink-3,#8891A0)}
.pl-state{font-size:11px;padding:2px 8px;border-radius:99px;background:#EFF1F4;color:#5A6472}
.pl-state-running{background:#E4F3EA;color:#1E6B4F}.pl-state-suspended{background:#FBF1DC;color:#9A6B12}
.pl-state-unloaded{background:#F3E9E8;color:#8A4A40}
.pl-inst-body{margin-top:8px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.pl-permrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pl-permrow small{color:var(--ink-3,#8891A0);margin-right:2px}
.pl-permtog{font-size:11px;display:inline-flex;gap:3px;align-items:center;background:#F5F6F8;border-radius:7px;padding:2px 7px;cursor:pointer;color:#71798A}
.pl-permtog.on{background:#E8F1EC;color:#22604B}
.pl-instmeta{color:var(--ink-3,#8891A0);font-size:11px}
.pl-h3{font-size:13px;margin:20px 0 8px;color:var(--ink-2,#5A6472)}
.pl-cmds{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.pl-cmd{text-align:left;background:#fff;border:1px solid var(--line,#E2E6EC);border-radius:10px;padding:8px 10px;cursor:pointer;transition:border-color .16s}
.pl-cmd:hover{border-color:#2A7A6C}
.pl-cmd b{font-size:12.5px;display:block}.pl-cmd small{font-size:10.5px;color:var(--ink-3,#8891A0)}
.pl-keys{display:flex;gap:8px;flex-wrap:wrap}
.pl-key{font-size:11px;background:#20293A;color:#DFE6F0;border-radius:7px;padding:3px 9px;font-family:ui-monospace,monospace}
.pl-dev{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}
@media(max-width:900px){.pl-dev{grid-template-columns:1fr}}
.pl-devcol{min-width:0}
.pl-code{background:#171D29;color:#CFE3D8;font-size:11px;border-radius:10px;padding:12px;overflow:auto;line-height:1.55;font-family:ui-monospace,monospace;white-space:pre-wrap}
.pl-report{border-radius:10px;padding:10px 12px;margin-top:10px;font-size:12px}
.pl-report.ok{background:#EAF5EE}.pl-report.no{background:#FBEDEA}
.pl-step{padding:2px 0}.pl-step.ok{color:#1E6B4F}.pl-step.no{color:#B3392B}
.pl-constats{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2,#5A6472);background:#fff;border:1px solid var(--line,#E2E6EC);border-radius:10px;padding:8px 12px;margin-bottom:8px}
.pl-apicalls{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.pl-apicalls span{font-size:10.5px;background:#F1F3F6;border-radius:6px;padding:2px 7px;color:#5A6472}
.pl-log{background:#fff;border:1px solid var(--line,#E2E6EC);border-radius:10px;padding:8px 10px;font-size:11px;color:#5A6472;max-height:150px;overflow:auto;margin-bottom:8px;font-family:ui-monospace,monospace}
.pl-log.pl-err{color:#A33D2F}

/* ===================== Market (Round 18) ===================== */
.mkt-wrap{padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.mkt-tabs{display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--line,#E2E6EC);padding-bottom:8px}
.mkt-tab{border:0;background:none;padding:8px 14px;border-radius:10px 10px 0 0;cursor:pointer;font-weight:600;color:#6B7280}
.mkt-tab.on{color:#111827;background:#EEF1F6}
.mkt-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mkt-search{flex:1;min-width:220px;padding:9px 12px;border:1px solid var(--line,#E2E6EC);border-radius:10px}
.mkt-featured{display:flex;gap:14px;flex-wrap:wrap}
.mkt-col h3{margin:4px 0 6px;font-size:13px;color:#6B7280}
.mkt-strip{display:flex;gap:6px;flex-wrap:wrap}
.mkt-mini{border:1px solid var(--line,#E2E6EC);background:#fff;border-radius:999px;padding:5px 11px;cursor:pointer;font-size:12.5px}
.mkt-mini:hover{box-shadow:0 2px 8px rgba(30,40,60,.1)}
.mkt-back{border:0;background:none;cursor:pointer;color:#4B5563;padding:2px 0;text-align:left;font-weight:600}
.mkt-detail{display:grid;grid-template-columns:1fr 280px;gap:20px}
.mkt-main h4{margin:14px 0 6px}
.mkt-shots{display:flex;gap:8px;margin:8px 0}
.mkt-shot{background:#EEF1F6;border-radius:10px;padding:26px 20px;font-size:12.5px;color:#6B7280}
.mkt-preview{font-size:12px;color:#6B7280;background:#F8FAFC;border-radius:8px;padding:6px 10px}
.mkt-review{border-top:1px solid #EEF1F6;padding:8px 0;font-size:13.5px}
.mkt-review small{color:#9CA3AF;margin-left:6px}
.mkt-rvact{margin-left:8px}
.mkt-rvact button{border:0;background:none;cursor:pointer}
.mkt-reply{margin:6px 0 0 14px;background:#F8FAFC;border-radius:8px;padding:6px 10px;font-size:13px}
.mkt-side{display:flex;flex-direction:column;gap:8px;background:#FCFCFD;border:1px solid var(--line,#E2E6EC);border-radius:14px;padding:14px;height:fit-content}
.mkt-price{font-size:20px;font-weight:800}
.mkt-chlog{font-size:12px;color:#6B7280;background:#FFF8EC;border-radius:8px;padding:6px 8px}
.mkt-couponrow input{width:100%;padding:7px 10px;border:1px solid var(--line,#E2E6EC);border-radius:8px}
.mkt-couponrow small{color:#9CA3AF}
.mkt-social{display:flex;gap:6px}
.mkt-social button{border:1px solid var(--line,#E2E6EC);background:#fff;border-radius:8px;padding:5px 10px;cursor:pointer}
.mkt-an,.mkt-support{font-size:12px;color:#6B7280}
.mkt-crhead{display:flex;gap:14px;align-items:flex-start}
.mkt-crhead p{margin:2px 0}
.mkt-rank{margin:6px 0;padding-left:22px}
.mkt-rank button{border:0;background:none;cursor:pointer;font-weight:600;color:#1F2937}
.mkt-dbhead{display:flex;gap:10px;align-items:center;font-size:15px}
.mkt-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.mkt-kpi{background:#fff;border:1px solid var(--line,#E2E6EC);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.mkt-kpi small{color:#6B7280}
.mkt-kpi b{font-size:16px}
.mkt-set{background:#F0FDF4;border-radius:10px;padding:8px 12px;font-size:13px}
.mkt-invoice{background:#111827;color:#E5E7EB;border-radius:12px;padding:12px 16px;font-size:12.5px;line-height:1.6}
.mkt-modrow{border:1px solid var(--line,#E2E6EC);border-radius:10px;padding:8px 12px;margin:6px 0;font-size:13.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- Admin Console (Round 19) ---------- */
.adm-wrap{gap:14px}
.adm-msg{padding:9px 13px;border-radius:10px;font-size:13px;white-space:pre-wrap}
.adm-msg.ok{background:#E4F4EA;color:#1B7A3D}
.adm-msg.no{background:#FBE7E5;color:#B3261E}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.adm-stat{background:#fff;border:1px solid var(--line,#E2E6EC);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.adm-stat small{color:#6B7280;font-size:11.5px}
.adm-stat b{font-size:19px}
.adm-stat span{color:#9AA2AF;font-size:11px}
.adm-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:960px){.adm-2col{grid-template-columns:1fr}}
.adm-panel{background:#fff;border:1px solid var(--line,#E2E6EC);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.adm-panel h3{margin:0;font-size:13.5px}
.adm-panel h3 small{color:#9AA2AF;font-weight:500}
.adm-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.adm-tbl td,.adm-tbl th{padding:5px 8px;border-bottom:1px solid #F0F2F6;text-align:left;vertical-align:top}
.adm-tbl th{color:#6B7280;font-size:11.5px}
.adm-users select{font-size:12px;max-width:130px}
.adm-acts button,.adm-row button,.adm-tbl button{border:1px solid var(--line,#E2E6EC);background:#fff;border-radius:8px;padding:3px 8px;font-size:11.5px;cursor:pointer;margin:1px}
.adm-acts button:hover{background:#F3F5F9}
.adm-node{padding:4px 8px;border-radius:8px;font-size:13px}
.adm-node small{color:#9AA2AF}
.adm-node.d1{margin-left:18px}.adm-node.d2{margin-left:36px}
.adm-code{background:#F7F8FB;border-radius:10px;padding:9px 11px;font:11.5px/1.5 ui-monospace,monospace;white-space:pre-wrap;word-break:break-all}
.adm-mono{font-family:ui-monospace,monospace;font-size:11px}
.adm-scroll{overflow-x:auto}
.adm-mtx td{white-space:nowrap;letter-spacing:1px}
.adm-form{display:flex;flex-direction:column;gap:6px}
.adm-form input{padding:8px 11px;border:1px solid var(--line,#E2E6EC);border-radius:9px;font-size:13px}
.adm-bar{height:8px;border-radius:99px;background:#EEF1F6;overflow:hidden}
.adm-bar i{display:block;height:100%;background:var(--mk-teal,#0FA3A3)}
.adm-row{font-size:12.5px;padding:5px 0;border-bottom:1px solid #F0F2F6}
.adm-dim{color:#9AA2AF}

/* ===== R20 Dev Portal ===== */
.dev-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.dev-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.dev-f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:#4B5563;margin:6px 0;flex:1}
.dev-f select,.dev-f input,.dev-f textarea{font:inherit;padding:6px 8px;border:1px solid var(--line,#E2E6EC);border-radius:8px}
.dev-pre{background:#0F1420;color:#D7E0F0;border-radius:10px;padding:10px 12px;font-size:11.5px;overflow:auto;max-height:260px;white-space:pre-wrap;word-break:break-all}
.dev-pre.err{background:#2A1215;color:#FBD5D5}
.dev-status{display:inline-block;padding:4px 10px;border-radius:8px;font-weight:700;font-size:13px;margin-bottom:6px}
.dev-status.ok{background:#E4F4EA;color:#1B7A3D}.dev-status.no{background:#FBE7E5;color:#B3261E}
.dev-note{color:#6B7280;font-size:12px;margin:6px 0 0}
.dev-pipe{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dev-pipe-node{background:#EEF2FF;border:1px solid #C7D2FE;color:#3730A3;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600}
.dev-pipe-arrow{color:#9AA2AF}
.dev-dlq{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--line,#E2E6EC)}
.dev-msg{font-size:12.5px;padding:6px 8px;background:#F6F8FB;border-radius:8px;margin:4px 0}
.dev-flow{display:flex;gap:8px;flex-wrap:wrap}
.dev-node{display:inline-flex;flex-direction:column;gap:1px;border:1px solid var(--line,#E2E6EC);border-radius:10px;padding:6px 10px;font-size:12px;background:#fff}
.dev-node small{color:#8A93A3;font-size:10.5px}
.dev-node.t-trigger{border-color:#F59E0B;background:#FFF7E6}.dev-node.t-branch,.dev-node.t-condition{border-color:#8B5CF6;background:#F4EFFF}
.dev-node.t-action{border-color:#10B981;background:#E9FBF3}.dev-node.t-loop{border-color:#3B82F6;background:#EAF2FF}
.dev-node.t-delay{border-color:#6B7280;background:#F3F4F6}.dev-node.t-variable{border-color:#EC4899;background:#FDEFF6}
.dev-log{font-size:12px;padding-left:18px;max-height:240px;overflow:auto}
.dev-log li{margin:2px 0}
@media (max-width:980px){.dev-cols{grid-template-columns:1fr}}

/* ===== R21 Mobile Touch First ===== */
.mb-frame{position:relative;margin:12px auto;border:6px solid var(--pg-text,#1A1A1A);border-radius:18px;background:var(--pg-bg,#fff);overflow:hidden}
.mb-rail{position:absolute;left:0;top:10%;width:26px;height:80%;border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--pg-text,#1A1A1A) 8%,transparent)}
.mb-bottombar{position:absolute;left:8%;right:8%;bottom:6px;height:30px;border-radius:15px;background:color-mix(in srgb,var(--pg-text,#1A1A1A) 10%,transparent);display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:6px}
.mb-float{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:4px 8px;border-radius:10px;background:var(--pg-surface,#fff);box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:10px;white-space:nowrap}
.mb-canvas{position:absolute;inset:44px 34px 60px 34px;display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;padding:6px;border:1px dashed color-mix(in srgb,var(--pg-text,#1A1A1A) 25%,transparent);border-radius:8px;font-size:10px;overflow:hidden}
.mb-el{padding:3px 7px;border:1px solid color-mix(in srgb,var(--pg-text,#1A1A1A) 30%,transparent);border-radius:6px;cursor:pointer}
.mb-el.on{outline:2px solid var(--pg-accent,#3E63DD);outline-offset:1px}
.mb-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--pg-surface,#fff);border-radius:12px 12px 0 0;box-shadow:0 -2px 10px rgba(0,0,0,.15);text-align:center;font-size:10px;padding-top:12px;transition:height .15s}
.mb-sheet.s-collapsed{height:8%}.mb-sheet.s-peek{height:25%}.mb-sheet.s-half{height:50%}.mb-sheet.s-full{height:92%}
.mb-grab{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:32px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--pg-text,#1A1A1A) 30%,transparent)}
.mb-panel{position:absolute;right:6px;top:20%;width:26%;height:40%;border-radius:8px;background:var(--pg-surface,#fff);box-shadow:0 2px 8px rgba(0,0,0,.15);font-size:9px;display:flex;align-items:center;justify-content:center}
.mb-mini{position:absolute;right:8px;bottom:66px;width:44px;height:26px;border:1px solid color-mix(in srgb,var(--pg-text,#1A1A1A) 35%,transparent);border-radius:4px;background:color-mix(in srgb,var(--pg-accent,#3E63DD) 12%,transparent)}
.mb-stroke{height:60px;display:flex;align-items:center;justify-content:center}
.mb-stroke span{display:block;width:120px;border-radius:20px;background:var(--pg-accent,#3E63DD);min-height:3px}
.mb-cf{padding:8px 10px;border:1px solid color-mix(in srgb,var(--pg-text,#1A1A1A) 18%,transparent);border-radius:8px;margin:6px 0;font-size:13px}
.mb-cf.done{opacity:.6}

/* ===== Round 22 — AI Agent Studio (#/agent) ===== */
.ag-screen .ag-body { display: grid; gap: 14px; }
.ag-screen .ag-explain { max-width: 260px; font-size: 12px; color: var(--pg-text-soft, #5B6472); }
.ag-screen .ag-scenes { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-screen .dev-log .msg { padding: 6px 0; border-bottom: 1px solid var(--pg-line, #E5E8EE); font-size: 13px; }
.ag-screen .dev-log .msg b { color: var(--pg-primary, #2E8C7F); margin-right: 6px; }

/* ============================================================
   K-DLS — Design Language Studio  (Round 24)
   ============================================================ */
.dls-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.dls-sw{display:inline-flex;align-items:center;gap:6px;margin:2px 8px 2px 0}
.dls-sw code{font-size:11px;color:#6B7480}
.dls-sw small{color:#9AA2AF;font-size:10.5px}
.dls-chip{width:22px;height:22px;border-radius:6px;border:1px solid rgba(20,28,40,.12);display:inline-block}
.dls-swrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:8px 0}
.dls-sp{height:22px;background:var(--mk-teal-soft,#E3F1EE);border:1px solid var(--mk-teal,#2E8C7F);border-radius:4px}
.dls-r{width:64px;height:64px;background:#fff;border:1.5px solid var(--mk-border,#E2E6EC);display:flex;align-items:center;justify-content:center;text-align:center}
.dls-r small{color:#6B7480;font-size:10.5px;line-height:1.3}
.dls-el{width:96px;height:64px;background:#fff;border-radius:12px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;margin-bottom:14px}
.dls-el small{color:#6B7480;font-size:10.5px}
.dls-lm{display:flex;flex-direction:column;gap:6px}
.dls-lm-row{display:flex;gap:10px;align-items:center}
.dls-less{color:#9AA2AF;text-decoration:line-through;font-size:13px;min-width:130px}
.dls-more{color:var(--mk-teal,#2E8C7F);font-weight:700;font-size:13.5px}
.dls-type-row{display:flex;gap:14px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--mk-border,#E2E6EC)}
.dls-type-row small{color:#9AA2AF;font-size:11px;margin-left:auto;white-space:nowrap}
.dls-cardspec{background:#fff;border:1px solid var(--mk-border,#E2E6EC);border-radius:10px;padding:9px 12px;display:flex;flex-direction:column;gap:3px;max-width:220px}
.dls-cardspec small{color:#6B7480;font-size:11px}
.dls-preview{border-radius:14px;padding:16px;margin:10px 0;transition:background 220ms ease}

/* ============ Round 32 — Left Navigation 검수 화면 ============ */
.nv-preview { display: flex; flex-direction: column; gap: 6px; max-width: 340px; margin-top: 10px; }
.nv-row { border: 1px solid var(--mk-line, #e3e3ea); border-radius: 10px; padding: 9px 14px; font-weight: 600; font-size: 13.5px; background: var(--mk-surface, #fff); display: flex; flex-direction: column; gap: 2px; }
.nv-row small { font-weight: 400; opacity: .6; font-size: 11.5px; }
.nv-row.lg { font-size: 15.5px; padding: 12px 14px; border-width: 2px; }
.nv-row.entrance { border-style: dashed; background: transparent; }
.nv-bottom { display: flex; gap: 8px; margin-top: 10px; max-width: 340px; }
.nv-bottom span { flex: 1; text-align: center; border: 1px solid var(--mk-line, #e3e3ea); border-radius: 10px; padding: 8px 4px; font-size: 12.5px; font-weight: 600; background: var(--mk-surface, #fff); }

/* ============ Round 35 — MK_EASY: 빠른동작 알약 · 호버 칩 · 드롭 ============ */
.ed-quickpill{position:absolute;z-index:6;display:flex;gap:2px;background:var(--mk-surface,#fff);border:1px solid var(--mk-border,#E1E5EC);border-radius:999px;box-shadow:0 8px 24px rgba(16,24,40,.14);padding:3px;transform:translateY(-100%)}
.ed-quickpill button{border:none;background:none;cursor:pointer;border-radius:999px;padding:5px 10px;font:var(--mk-t-caption,12px/1.2 Pretendard);font-weight:700;color:var(--mk-text,#1F2733);white-space:nowrap}
.ed-quickpill button:hover{background:var(--mk-soft,#EEF2F0)}
.ed-quickpill button:last-child:hover{background:#FBE9E4;color:#C4573F}
.ed-hoverchip{position:absolute;z-index:5;display:flex;gap:2px;background:#1F2733;border-radius:8px;padding:3px;box-shadow:0 6px 18px rgba(16,24,40,.24);transform:translateY(-100%)}
.ed-hoverchip button{border:none;background:none;cursor:pointer;border-radius:6px;padding:4px 9px;font:var(--mk-t-caption,12px/1.2 Pretendard);font-weight:700;color:#F2F5F9;white-space:nowrap}
.ed-hoverchip button:hover{background:rgba(255,255,255,.14)}
.ed-canvas.ed-dropping{outline:3px dashed var(--mk-accent,#2E8C7F);outline-offset:-3px}

/* ================= R36 이식 라운드 — 실편집·실이미지 ================= */
.ed-canvas .ed-el { touch-action: none; }
.ed-canvas .ed-el:not(.sel):hover { cursor: pointer; }
.ed-canvas .ed-el.sel { cursor: move; }
.ed-imgreal { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; pointer-events: none; user-select: none; }
.ed-el.has-src { overflow: hidden; background: none; border: none; color: transparent; }
.ed-guide { position: absolute; background: var(--mk-accent, #12A594); opacity: .8; pointer-events: none; z-index: 40; }
.ed-guide.gv { top: 0; bottom: 0; width: 1px; transform: translateX(-.5px); }
.ed-guide.gh { left: 0; right: 0; height: 1px; transform: translateY(-.5px); }
.ed-txt[contenteditable] { outline: 2px solid var(--mk-accent, #12A594); outline-offset: 2px; border-radius: 2px; cursor: text; white-space: pre-wrap; min-width: 8px; display: inline-block; }
.ed-el .ed-txt { pointer-events: none; }
.ed-el.sel .ed-txt, .ed-txt[contenteditable] { pointer-events: auto; }

/* R36 수리 — 프레즌스 바: 그리드 파괴 금지, 캔버스 위 부유 알약(상단 중앙) */
.ed-canvaswrap > .cw-presence { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30;
  padding: 5px 12px; margin: 0; background: var(--mk-surface); border: 1px solid var(--mk-border);
  border-radius: var(--mk-r-pill); box-shadow: var(--mk-sh-floating); flex-wrap: nowrap; white-space: nowrap; max-width: 92%; overflow: hidden; }
.ed-canvas { flex-shrink: 0; }

/* ================= R37 — 플레이어(실재생) ================= */
.mkp-back { position: fixed; inset: 0; z-index: 900; background: rgba(15, 20, 28, .94); display: flex; flex-direction: column; padding: 18px clamp(16px, 4vw, 48px) 22px; }
.mkp-top { display: flex; align-items: center; gap: 14px; color: #B7C0CD; font: var(--mk-t-caption); }
.mkp-segs { display: flex; gap: 5px; flex: 1; }
.mkp-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.mkp-seg i { display: block; height: 100%; background: #fff; width: 0; }
.mkp-seg.done i { width: 100%; }
.mkp-cap { white-space: nowrap; } .mkp-cap em { opacity: .6; font-style: normal; }
.mkp-x { color: #fff; font-size: 16px; padding: 4px 8px; }
.mkp-stagewrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; cursor: pointer; padding: 14px 0; }
.mkp-scene { position: relative; aspect-ratio: 16/9; width: min(100%, calc((100vh - 170px) * 16 / 9)); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.5); container-type: size; }
.mkp-el { position: absolute; }
.mkp-ph { background: #E6ECF2; border-radius: 8px; color: #8895A5; display: flex; align-items: center; justify-content: center; font-size: 2cqh; }
.mkp-data { background: transparent; }
.mkp-ctl { display: flex; justify-content: center; gap: 10px; }
.mkp-ctl button { color: #E8EDF3; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: var(--mk-r-pill); padding: 7px 16px; font: var(--mk-t-caption); font-weight: 600; }
.mkp-ctl button:hover { background: rgba(255,255,255,.18); }

/* ============================================================
   R53 — Video 허브 (구조 템플릿 선택)
   ============================================================ */
.vh-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--mk-sp-4); margin-bottom: var(--mk-sp-6); }
.vh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--mk-sp-4); }
.vh-card { text-align: left; cursor: pointer; border: 1.5px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5); background: var(--mk-surface); color: var(--mk-text-primary); font: var(--mk-t-body-sm); transition: border-color .15s, box-shadow .15s; }
.vh-card:hover { border-color: var(--mk-teal); box-shadow: var(--mk-sh-subtle); }
.vh-card.on { border-color: var(--mk-teal); box-shadow: 0 0 0 2px var(--mk-teal-soft); }
.vh-card b { display: block; font: var(--mk-t-h3); }
.vh-purpose { display: block; margin-top: 4px; color: var(--mk-text-secondary); min-height: 2.6em; }
.vh-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vh-badge { font: var(--mk-t-caption); color: var(--mk-text-secondary); border: 1px solid var(--mk-border); border-radius: var(--mk-r-pill); padding: 2px 9px; background: var(--mk-surface-muted); }
.vh-panel { margin-top: var(--mk-sp-5); border: 1.5px solid var(--mk-teal); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5); background: var(--mk-surface); }
.vh-chip { cursor: pointer; border: 1.5px solid var(--mk-border); border-radius: var(--mk-r-pill); padding: 5px 14px; background: var(--mk-surface); font: var(--mk-t-body-sm); color: var(--mk-text-primary); }
.vh-chip.on { border-color: var(--mk-teal); color: var(--mk-teal); font-weight: 700; background: var(--mk-teal-soft); }
.vh-input { display: block; width: 100%; box-sizing: border-box; border: 1.5px solid var(--mk-border); border-radius: var(--mk-r-small); padding: 9px 11px; font: var(--mk-t-body-sm); background: var(--mk-surface); color: var(--mk-text-primary); margin-top: 10px; }
.vh-input:focus { outline: none; border-color: var(--mk-teal); }
.vh-go { display: block; width: 100%; margin-top: 12px; cursor: pointer; border: none; border-radius: var(--mk-r-small); padding: 12px; font: var(--mk-t-button); background: var(--mk-teal); color: var(--mk-surface); }
.vh-go:hover { background: var(--mk-teal-hover); }

/* ---- R55: Workspace 실편집 — 선택 핸들·클립·커서 ---- */
.ws-el{touch-action:none}
.ws-el.media,.ws-el.box{cursor:move}
.ws-clip{position:absolute;inset:0;overflow:hidden;display:block}
/* R105 — 자르기(Crop) 오버레이: 스크림 4 + 흰 상자 + 코너 4(터치 14px) + 확인 바 */
.ws-el.cropping{z-index:6;outline:none}
.ws-croplay{position:absolute;inset:0;z-index:4}
.ws-croplay .sc{position:absolute;background:rgba(15,20,30,.45);pointer-events:none}
.ws-crbox{position:absolute;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(20,28,40,.35) inset;cursor:move;touch-action:none;box-sizing:border-box}
.ws-crh{position:absolute;width:14px;height:14px;background:#fff;border:1.5px solid var(--mk-teal);border-radius:3px;box-shadow:0 1px 2px rgba(20,28,40,.25);touch-action:none}
.ws-crh.tl{left:-7px;top:-7px;cursor:nwse-resize}
.ws-crh.tr{right:-7px;top:-7px;cursor:nesw-resize}
.ws-crh.bl{left:-7px;bottom:-7px;cursor:nesw-resize}
.ws-crh.br{right:-7px;bottom:-7px;cursor:nwse-resize}
.ws-cropbar{position:absolute;left:50%;top:100%;margin-top:8px;transform:translateX(-50%);display:flex;gap:6px;z-index:5;white-space:nowrap}
.ws-cropbar button{padding:6px 12px;border-radius:8px;border:1px solid var(--mk-border);background:#fff;cursor:pointer;font:var(--mk-t-caption);box-shadow:0 2px 6px rgba(20,28,40,.15)}
.ws-cropbar button[data-ws-crok]{background:var(--mk-teal);border-color:var(--mk-teal);color:#fff}
/* R106 — 세밀 초점 오버레이: 스크림 없음(사진이 미끄러지는 게 미리보기), 마커 링 + 확인 바 */
.ws-el.focaling{z-index:6;outline:none}
.ws-folay{position:absolute;inset:0;z-index:4;cursor:crosshair;touch-action:none}
.ws-fopt{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2.5px solid #fff;background:radial-gradient(circle at center,var(--mk-teal) 0 4px,rgba(31,169,159,.35) 4px);box-shadow:0 0 0 1px rgba(20,28,40,.35),0 2px 8px rgba(20,28,40,.3);pointer-events:none;box-sizing:border-box}
.ws-cropbar button[data-ws-fook]{background:var(--mk-teal);border-color:var(--mk-teal);color:#fff}
.ws-el .ws-hd{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid var(--mk-teal);border-radius:2px;box-shadow:0 1px 2px rgba(20,28,40,.18);pointer-events:auto;z-index:3}
.ws-el .ws-hd.tl{left:-4px;top:-4px;cursor:nwse-resize}
.ws-el .ws-hd.tr{right:-4px;top:-4px;cursor:nesw-resize}
.ws-el .ws-hd.bl{left:-4px;bottom:-4px;cursor:nesw-resize}
.ws-el .ws-hd.br{right:-4px;bottom:-4px;cursor:nwse-resize}
.ws-el .ws-hd.ml,.ws-el .ws-hd.mr{width:5px;height:16px;border-radius:3px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.ws-el .ws-hd.ml{left:-3px}
.ws-el .ws-hd.mr{right:-3px}
/* R95 — 터치가 잡을 수 있는 핸들: 시각은 그대로, 히트 영역만 34px 패드.
   pointer:coarse(태블릿·폰)에선 시각 핸들 자체도 키운다. */
.ws-el .ws-hd{touch-action:none}
.ws-el .ws-hd::after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%)}
@media (pointer:coarse){
  .ws-el .ws-hd{width:14px;height:14px;border-radius:4px}
  .ws-el .ws-hd.tl{left:-7px;top:-7px}
  .ws-el .ws-hd.tr{right:-7px;top:-7px}
  .ws-el .ws-hd.bl{left:-7px;bottom:-7px}
  .ws-el .ws-hd.br{right:-7px;bottom:-7px}
  .ws-el .ws-hd.ml,.ws-el .ws-hd.mr{width:8px;height:24px}
  .ws-el .ws-hd.ml{left:-4px}
  .ws-el .ws-hd.mr{right:-4px}
}

/* ---- R56: 텍스트 스타일 패널 ---- */
.cx-tsps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:-4px 0 10px}
.cx-tsp{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 5px;border:1.5px solid var(--mk-border);border-radius:9px;background:var(--mk-surface);cursor:pointer}
.cx-tsp:hover{border-color:var(--mk-teal)}
.cx-tsp span{font-size:15px;font-weight:700;line-height:1.35;padding:.08em .34em;border-radius:.22em;max-width:100%;overflow:hidden}
.cx-tsp small{font:var(--mk-t-caption);color:var(--mk-text-secondary);white-space:nowrap}
.cx-sws{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 10px}
.cx-swb{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--mk-border);cursor:pointer;padding:0}
.cx-swb.on{border-color:var(--mk-teal);box-shadow:0 0 0 2px var(--mk-teal-soft)}
.cx-swb.none{background:var(--mk-surface);color:var(--mk-text-secondary);font-size:13px;line-height:1}
.cx-als{display:flex;gap:6px;margin:-4px 0 10px}
.cx-alb{flex:1;padding:6px 0;border:1.5px solid var(--mk-border);border-radius:8px;background:var(--mk-surface);cursor:pointer;font-size:13px;color:var(--mk-text-secondary)}
.cx-alb.on{border-color:var(--mk-teal);background:var(--mk-teal-soft);color:var(--mk-text)}

/* ---- R58: 씬 길이 인라인 조절 ---- */
.mk-durctl{display:inline-flex;align-items:center;gap:2px;font:var(--mk-t-caption);color:var(--mk-text)}
.mk-durctl button{width:18px;height:18px;line-height:1;border:1px solid var(--mk-border);border-radius:5px;background:var(--mk-surface);cursor:pointer;font-size:12px;color:var(--mk-text-secondary);padding:0}
.mk-durctl button:hover{border-color:var(--mk-teal);color:var(--mk-text)}
.mk-durctl input{width:36px;height:20px;border:1px solid var(--mk-border);border-radius:5px;text-align:center;font:var(--mk-t-caption);background:var(--mk-surface);-moz-appearance:textfield}
.mk-durctl input::-webkit-outer-spin-button,.mk-durctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.an-timeline .tl.on,.ws-timeline .tl.on{min-width:118px}

/* ---------------- R61 — Video 허브 시작 화면 (스테이징) ---------------- */
.vh-stage { margin-top: 14px; border: 1.5px solid var(--mk-border); border-radius: var(--mk-r-medium); padding: var(--mk-sp-5); background: var(--mk-surface); }
.vh-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.vh-row, .vh-pair { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mk-border); border-radius: var(--mk-r-small); padding: 6px 8px; background: var(--mk-bg); }
.vh-row[draggable="true"] { cursor: grab; }
.vh-grip { color: var(--mk-text-tertiary); font-size: 11px; letter-spacing: -2px; }
.vh-thumb { width: 44px; height: 32px; object-fit: cover; border-radius: 4px; background: var(--mk-border); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }
.vh-thumb-empty { color: var(--mk-text-tertiary); border: 1px dashed var(--mk-border); background: transparent; }
/* R73 — 축소본을 기다리는 자리. 크기·리듬은 .vh-thumb 그대로라 채워져도 안 흔들린다 */
.vh-thumb-wait { background: var(--mk-border); animation: vhThumbWait 1.1s ease-in-out infinite; }
@keyframes vhThumbWait { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
.vh-thumbwait { font: var(--mk-t-small); color: var(--mk-text-tertiary); margin: 4px 0 6px; }
@media (prefers-reduced-motion: reduce) { .vh-thumb-wait { animation: none; opacity: .6; } }
.vh-cap { flex: 1; min-width: 0; border: 1px solid var(--mk-border); border-radius: var(--mk-r-small); padding: 5px 8px; font: var(--mk-t-body-sm); background: var(--mk-surface); color: var(--mk-text-primary); }
.vh-rowbtns { display: inline-flex; gap: 2px; }
.vh-rowbtns button { cursor: pointer; border: 1px solid var(--mk-border); background: var(--mk-surface); border-radius: 4px; width: 24px; height: 24px; font-size: 11px; color: var(--mk-text-secondary); }
.vh-rowbtns button:hover { border-color: var(--mk-teal); color: var(--mk-text-primary); }
.vh-pairn { width: 18px; text-align: center; font: var(--mk-t-caption); color: var(--mk-text-tertiary); flex: none; }
.vh-slot { cursor: pointer; border: 1px solid var(--mk-border); border-radius: var(--mk-r-small); background: var(--mk-surface); padding: 4px 8px; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font: var(--mk-t-caption); color: var(--mk-text-secondary); flex: none; }
.vh-slot:hover { border-color: var(--mk-teal); }
.vh-arrow { color: var(--mk-text-tertiary); flex: none; }
.vh-est { display: block; margin-top: 10px; font: var(--mk-t-body-sm); color: var(--mk-text-secondary); }
.vh-est-warn { color: var(--mk-warn, #b5762a); }

/* ===== R67 — 내 사진 자동 구성 입구 (screens/video3.js) ===== */
.vh-roles { display: inline-flex; gap: 2px; margin-right: 4px; }
.vh-rolebtn { cursor: pointer; border: 1px solid var(--mk-border); background: var(--mk-surface); border-radius: 4px; width: 24px; height: 24px; font-size: 11px; color: var(--mk-text-secondary); }
.vh-rolebtn:hover { border-color: var(--mk-teal); color: var(--mk-text-primary); }
.vh-rolebtn.on { border-color: var(--mk-teal); background: var(--mk-teal); color: #fff; }
.vh-row-off { opacity: .5; }
.vh-row-off .vh-rolebtn.on { opacity: 1; }
.vh-smart { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--mk-border); border-radius: var(--mk-r-small); background: var(--mk-bg-secondary, #F2F5F9); }
.vh-smart .vh-go { margin-top: 8px; }

/* ---- Home 미니 도구 (R80, 프로덕트 전용 렌더) ---- */
.h2-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--mk-sp-3); }
.h2-mini-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--mk-r-lg, 12px); background: var(--mk-bg-raise, var(--mk-bg-2, #17171c)); text-decoration: none; color: inherit; transition: transform var(--mk-mo-base, 160ms) var(--mk-mo-ease, ease), background var(--mk-mo-base, 160ms); }
.h2-mini-card:hover { transform: translateY(-2px); background: var(--mk-bg-hover, rgba(255,255,255,.05)); }
.h2-mini-ic { font-size: 22px; }
.h2-mini-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h2-mini-tx b { font-size: 14px; }
.h2-mini-tx small { font-size: 12px; color: var(--mk-fg-dim, #9a9aa5); }
.h2-mini-ar { margin-left: auto; color: var(--mk-fg-dim, #9a9aa5); }

/* R99 — 구조 카드 호버 미리보기 */
.vh-pv{position:fixed;z-index:1200;background:#fff;border:1px solid var(--mk-border);border-radius:12px;box-shadow:var(--mk-sh-floating);padding:8px;pointer-events:none;animation:vhpv-in .16s ease-out both}
@keyframes vhpv-in{from{opacity:0;transform:translateY(calc(-100% + 6px))}to{opacity:1;transform:translateY(-100%)}}
.vh-pv .vh-pv-stage{width:100%;aspect-ratio:var(--pv-ar,16/9);border-radius:8px;overflow:hidden;background:var(--mk-surface-muted)}
.vh-pv .vh-pv-stage .mkp-scene{position:relative;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;container-type:size}
.vh-pv .vh-pv-dots{display:flex;gap:4px;justify-content:center;margin-top:6px}
.vh-pv .vh-pv-dots i{width:5px;height:5px;border-radius:50%;background:var(--mk-border)}
.vh-pv .vh-pv-dots i.on{background:var(--mk-teal)}
.vh-pv small{display:block;text-align:center;margin-top:4px;font:var(--mk-t-caption);color:var(--mk-text-secondary)}

/* ===== R101 — 사진 보정·필터 (workspace 이미지 패널) ===== */
.cx-fchips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-2px 0 10px}
.cx-fchip{display:flex;flex-direction:column;gap:3px;padding:3px;border:1.5px solid var(--mk-border);border-radius:8px;background:var(--mk-background);cursor:pointer}
.cx-fchip .th{display:block;width:100%;aspect-ratio:1;border-radius:5px;overflow:hidden}
.cx-fchip small{font:var(--mk-t-caption);color:var(--mk-text-secondary);line-height:1.1;text-align:center}
.cx-fchip.on{border-color:var(--mk-teal);box-shadow:0 0 0 2px var(--mk-teal-soft)}
.cx-fchip.on small{color:var(--mk-teal);font-weight:700}
.cx-padj{display:flex;flex-direction:column;gap:7px;margin:-2px 0 10px}
.cx-prow{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:7px}
.cx-prow span{font:var(--mk-t-caption);color:var(--mk-text-secondary)}
.cx-prow b{font:var(--mk-t-caption);color:var(--mk-text-primary);text-align:right;font-variant-numeric:tabular-nums}
.cx-prow input[type=range]{width:100%;accent-color:var(--mk-teal);margin:0}
.cx-scenebtn.primary{background:var(--mk-teal);color:#fff;border-color:var(--mk-teal)}
/* R102 — 모양·뒤집기 */
.cx-shrow{display:flex;gap:6px;align-items:center;margin:-2px 0 10px}
.cx-shrow i{flex:1}
.cx-shb{width:32px;height:30px;border:1.5px solid var(--mk-border);border-radius:7px;background:var(--mk-background);cursor:pointer;font-size:15px;line-height:1;color:var(--mk-text-secondary);padding:0}
.cx-shb.on{border-color:var(--mk-teal);color:var(--mk-teal);box-shadow:0 0 0 2px var(--mk-teal-soft)}
/* R104 — 원클릭 정돈 */
.cx-shb.wide{width:auto;flex:1;font:var(--mk-t-caption);padding:0 4px;white-space:nowrap}

/* R107 — 회전 손잡이 (.ws-hd 6개 계약과 분리된 별도 어포던스) */
.ws-el .ws-rh{position:absolute;left:50%;top:-22px;width:10px;height:10px;margin-left:-5px;background:#fff;border:1.5px solid var(--mk-teal);border-radius:50%;box-shadow:0 1px 2px rgba(20,28,40,.18);pointer-events:auto;cursor:grab;touch-action:none;z-index:3}
.ws-el .ws-rh::before{content:'';position:absolute;left:50%;top:9px;width:1.5px;height:13px;margin-left:-.75px;background:var(--mk-teal)}
.ws-el .ws-rh::after{content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%)}
.cx-rotrow{display:flex;gap:6px;align-items:center;margin:-4px 0 8px}
.cx-rotrow input[type=range]{flex:1;min-width:0}
@media (pointer:coarse){.ws-el .ws-rh{width:14px;height:14px;margin-left:-7px;top:-26px}}

/* ============================================================
   R120 — 자가 진단 (#/selfcheck). 준호가 폰에서 여는 화면이라
   좁은 폭 기준으로 짠다(넓으면 2열로 벌어짐).
   ============================================================ */
.sc { max-width: 860px; margin: 0 auto; padding: 4px 0 40px; }
.sc-head h2 { font: var(--mk-t-h2); margin: 0 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-head p { font: var(--mk-t-body-sm); color: var(--mk-text-secondary); margin: 0 0 14px; line-height: 1.65; }
/* R122 — 내보내기 검사는 실제로 인코딩을 돌린다. 몇 초 걸리는 까닭을 미리 말해 준다 */
.sc-head .sc-note { border-left: 3px solid var(--mk-accent, #6aa9ff); padding: 8px 0 8px 12px; background: rgba(106,169,255,.06); border-radius: 0 6px 6px 0; }
.sc-badge { font: var(--mk-t-caption); padding: 3px 10px; border-radius: 999px; background: var(--mk-surface-2); color: var(--mk-text-secondary); border: 1px solid var(--mk-border); }
.sc-badge.good { background: #E7F6EC; color: #1B7F3B; border-color: #A9DCBB; }
.sc-badge.bad  { background: #FDEBEC; color: #B3261E; border-color: #F1B4B4; }
.sc-badge.warn { background: #FFF4E0; color: #8A5A00; border-color: #F0D096; }
.sc-badge.run  { background: var(--mk-teal-soft); color: var(--mk-teal); border-color: var(--mk-teal); }
.sc-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sc-btn { font: var(--mk-t-body-sm); font-weight: 600; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; background: var(--mk-teal); color: #fff; }
.sc-btn[disabled] { opacity: .5; cursor: default; }
/* R123 — 결과 보내기 */
.sc-btn.ghost { background: var(--mk-surface-2); color: var(--mk-text); border: 1px solid var(--mk-border); }
.sc-copymsg { font: var(--mk-t-caption); color: var(--mk-text-secondary); }
.sc-report .sc-json { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45;
  color: var(--mk-text); background: var(--mk-surface-2); border: 1px solid var(--mk-border);
  border-radius: 8px; resize: vertical; -webkit-user-select: text; user-select: text; }
.sc-skipmsg { font: var(--mk-t-caption); color: var(--mk-text-secondary); }

.sc-sec { margin-top: 26px; }
.sc-sech { font: var(--mk-t-h3); margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.sc-sech small { font: var(--mk-t-caption); color: var(--mk-text-secondary); font-weight: 400; }
.sc-group { margin-bottom: 14px; }
.sc-group h3 { font: var(--mk-t-caption); font-weight: 700; color: var(--mk-text-secondary); margin: 0 0 6px; letter-spacing: .04em; }
.sc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.sc-row { display: flex; gap: 10px; padding: 11px 13px; border: 1px solid var(--mk-border); border-radius: 9px; background: var(--mk-surface); align-items: flex-start; }
.sc-row.sc-pass { border-color: #A9DCBB; background: #F4FBF6; }
.sc-row.sc-fail { border-color: #F1B4B4; background: #FEF6F6; }
.sc-row.sc-skip { border-color: #F0D096; background: #FFFBF3; }
.sc-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--mk-surface-2); color: var(--mk-text-secondary); }
.sc-pass .sc-ico { background: #1B7F3B; color: #fff; }
.sc-fail .sc-ico { background: #B3261E; color: #fff; }
.sc-skip .sc-ico { background: #8A5A00; color: #fff; }
.sc-body { min-width: 0; flex: 1; }
.sc-t { display: flex; align-items: baseline; gap: 8px; }
.sc-t b { font: var(--mk-t-body-sm); font-weight: 700; }
.sc-t em { font: var(--mk-t-caption); font-style: normal; color: var(--mk-text-secondary); }
.sc-p { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: 2px; line-height: 1.55; }
.sc-m { font: var(--mk-t-body-sm); margin-top: 5px; line-height: 1.5; }
.sc-fail .sc-m { color: #B3261E; font-weight: 600; }
.sc-d { font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: 3px; word-break: break-all; line-height: 1.5; }
.sc-why { font: var(--mk-t-caption); color: var(--mk-text-tertiary, var(--mk-text-secondary)); margin-top: 4px; opacity: .85; line-height: 1.5; }

.sc-eyes { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 620px) { .sc-eyes { grid-template-columns: 1fr 1fr; } }
.sc-sample { border: 1px solid var(--mk-border); border-radius: 10px; overflow: hidden; background: var(--mk-surface); }
.sc-sample-hd { padding: 9px 12px; border-bottom: 1px solid var(--mk-border); }
.sc-sample-hd b { font: var(--mk-t-body-sm); font-weight: 700; display: block; }
.sc-sample-hd small { font: var(--mk-t-caption); color: var(--mk-text-secondary); line-height: 1.5; display: block; margin-top: 2px; }
.sc-stage { position: relative; aspect-ratio: 400/640; max-height: 340px; margin: 0 auto; overflow: hidden; background: #141A22; }
.sc-dot { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2.5px rgba(255,255,255,.9); pointer-events: none; z-index: 5; }
.sc-nosample { padding: 20px; text-align: center; font: var(--mk-t-caption); color: var(--mk-text-secondary); }

.sc-eyelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sc-eyelist li { padding: 10px 13px; border: 1px dashed var(--mk-border); border-radius: 9px; }
.sc-eyelist b { font: var(--mk-t-body-sm); font-weight: 700; }
.sc-eyelist em { font: var(--mk-t-caption); font-style: normal; color: var(--mk-text-secondary); margin-left: 7px; }
.sc-eyelist span { display: block; font: var(--mk-t-caption); color: var(--mk-text-secondary); margin-top: 3px; line-height: 1.6; }

/* R135 — 속성 패널 위치·크기 숫자 입력 */
.cx-nrow{display:flex;gap:6px;margin-bottom:var(--mk-sp-2)}
.cx-nf{flex:1;display:flex;align-items:center;gap:4px;border:1px solid var(--mk-border);border-radius:var(--mk-r-small);padding:4px 8px;background:var(--mk-background);min-width:0}
.cx-nf span{font:var(--mk-t-caption);color:var(--mk-text-secondary);flex:none}
.cx-nf i{font:var(--mk-t-caption);color:var(--mk-text-secondary);font-style:normal;flex:none}
.cx-nf input[type=number]{flex:1;min-width:0;width:100%;border:0;background:none;padding:3px 0;font:var(--mk-t-body-sm);color:var(--mk-text-primary);text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.cx-nf input[type=number]:focus{outline:none}
.cx-nf:focus-within{border-color:var(--mk-teal);background:var(--mk-surface)}
.cx-field select{border:1px solid var(--mk-border);border-radius:var(--mk-r-small);padding:7px 9px;font:var(--mk-t-body-sm);color:var(--mk-text-primary);background:var(--mk-background)}

/* R136 — 글꼴 고르기: 각 칸이 그 글꼴로 그린 내 글자 */
.cx-fonts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:-4px 0 10px}
.cx-fontb{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:7px 9px 5px;border:1.5px solid var(--mk-border);border-radius:9px;background:var(--mk-surface);cursor:pointer;text-align:left;min-width:0}
.cx-fontb:hover{border-color:var(--mk-teal);background:var(--mk-teal-soft)}
.cx-fontb.on{border-color:var(--mk-teal);background:var(--mk-teal-soft);box-shadow:inset 0 0 0 1px var(--mk-teal)}
.cx-fontb span{font-size:18px;line-height:1.25;color:var(--mk-text-primary);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cx-fontb small{font:var(--mk-t-caption);color:var(--mk-text-secondary)}