.mockup-layout{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:24px;align-items:start}
.mockup-panel{display:flex;flex-direction:column;gap:16px}
.mockup-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
.mockup-card h2,.mockup-card h3{margin:0 0 8px;font-size:1.05rem}
.mockup-card .hint{color:var(--muted);font-size:.92rem;margin:0 0 12px}
.mockup-preview-wrap{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;position:sticky;top:88px}
.mockup-preview-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px}
.mockup-view-tabs{display:flex;flex-wrap:wrap;gap:8px}
.mockup-view-tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer}
.mockup-view-tab.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.mockup-canvas-wrap{display:flex;justify-content:center;align-items:center;background:var(--soft);border-radius:14px;overflow:hidden;min-height:320px}
#mockupCanvas{display:block;max-width:100%;height:auto}
.mockup-color-grid{display:flex;flex-wrap:wrap;gap:10px}
.mockup-color-chip{display:flex;align-items:center;gap:8px;border:2px solid transparent;background:#fff;border-radius:12px;padding:8px 10px;cursor:pointer;min-width:96px}
.mockup-color-chip span{width:24px;height:24px;border-radius:999px;background:var(--chip-color,#ccc);border:1px solid rgba(0,0,0,.08)}
.mockup-color-chip.is-active{border-color:var(--orange);box-shadow:0 0 0 2px rgba(255,122,26,.15)}
.mockup-color-chip b{font-size:.85rem}
.mockup-artwork-preview{width:100%;max-width:220px;border-radius:12px;border:1px solid var(--line);margin-top:10px}
.mockup-layout-info ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:.92rem}
.mockup-guide-list{margin:0 0 12px;padding-left:20px;color:var(--muted);font-size:.92rem;line-height:1.6}
.mockup-guide-list strong{color:var(--ink)}
.mockup-guide-card code{font-size:.85rem;background:var(--soft);padding:2px 6px;border-radius:4px}
@media (max-width:960px){.mockup-layout{grid-template-columns:1fr}.mockup-preview-wrap{position:static}}