:root { color-scheme: light; --ink: #172033; --green: #8b5cf6; --line: #dce3ea; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: Pretendard, "Noto Sans KR", Inter, system-ui, sans-serif; color: var(--ink); background: #f5f7fa; }
.fullscreen-preview { width: 100%; height: 100%; position: relative; }
.diagram-stage { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; place-items: safe center; padding: 80px 48px 48px; background-color: #f5f7fa; background-image: linear-gradient(#e6e9ed 1px, transparent 1px), linear-gradient(90deg, #e6e9ed 1px, transparent 1px); background-size: 24px 24px; cursor: grab; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #8b5cf6 #dfe5ec; }
.diagram-stage.panning { cursor: grabbing; user-select: none; }
.diagram-stage::-webkit-scrollbar { width: 15px; height: 15px; }
.diagram-stage::-webkit-scrollbar-track { background: #e2e8ef; }
.diagram-stage::-webkit-scrollbar-thumb { background: #9aa7b6; border: 3px solid #e2e8ef; border-radius: 8px; }
.diagram-stage::-webkit-scrollbar-thumb:hover { background: #68217a; }
.diagram-stage::-webkit-scrollbar-corner { background: #e2e8ef; }
.diagram { min-width: max-content; user-select: none; -webkit-user-drag: none; }
.diagram svg { display: block; max-width: none; height: auto; filter: drop-shadow(0 18px 40px rgba(18,38,63,.08)); -webkit-user-drag: none; }
.preview-toolbar { position: fixed; z-index: 10; top: 18px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.toolbar-group { display: flex; align-items: center; border: 1px solid rgba(104,33,122,.35); border-radius: 6px; overflow: hidden; background: rgba(32,32,32,.96); box-shadow: 0 10px 30px rgba(7,17,31,.16); pointer-events: auto; }
.tool-button, .zoom-label { height: 38px; min-width: 40px; border: 0; color: #ddd; background: rgba(32,32,32,.96); cursor: pointer; font: 700 .78rem/1 system-ui, sans-serif; }
.tool-button:hover, .zoom-label:hover { color: white; background: #14273d; }
.tool-button:focus-visible, .zoom-label:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.back-button { width: auto; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; text-decoration: none; box-shadow: 0 10px 30px rgba(7,17,31,.16); pointer-events: auto; }
.back-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.zoom-label { width: 58px; border-left: 1px solid #263b52; border-right: 1px solid #263b52; font-family: ui-monospace, monospace; font-weight: 600; }
.loading, .empty-state { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; color: #64748b; background: rgba(245,247,250,.92); }
.loading span { width: 30px; height: 30px; border: 3px solid #d4dbe4; border-top-color: #159b70; border-radius: 50%; animation: spin .8s linear infinite; }
.loading p, .empty-state p { margin: 12px 0 0; font-size: .9rem; }
.empty-state strong { color: #be123c; }
.empty-state a { margin-top: 18px; color: #0f766e; font-weight: 700; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .diagram-stage { padding: 72px 24px 32px; }
  .preview-toolbar { top: 12px; left: 12px; right: 12px; }
  .back-button span { display: none; }
  .back-button { width: 40px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }