/* 틀 만들기 (builder.js, 2026-11-10) */
.checker-bg { background: repeating-conic-gradient(#ececea 0% 25%, #fafaf8 0% 50%) 50% / 24px 24px; }
.builder-stage { position: relative; width: 100%; max-width: 512px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; touch-action: none; }
.builder-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
.builder-stage .box .body { fill-opacity: 0.08; }
.builder-stage .box.copy .body { fill: #8a5cf6; stroke: #8a5cf6; fill-opacity: 0.06; stroke-width: 3; stroke-dasharray: 6 5; cursor: grab; }
.builder-stage .box.selected .body { stroke-width: 5; }
.builder-stage .box .sample { font: 700 40px "Gaegu", "Apple SD Gothic Neo", sans-serif; fill: #1e1f22; paint-order: stroke; stroke: #fff; stroke-width: 5px; pointer-events: none; }
.builder-stage .asset { cursor: grab; }
.builder-stage .asset .outline { fill: none; stroke: transparent; stroke-width: 2; }
.builder-stage .asset:hover .outline { stroke: var(--line); stroke-dasharray: 4 4; }
.builder-stage .asset.selected .outline { stroke: var(--rose); stroke-dasharray: 6 4; }
.builder-stage .handle { fill: #fff; stroke: var(--ink); stroke-width: 2; cursor: nwse-resize; }
.props { margin-top: 12px; }
.props label.inline { display: inline-flex; align-items: center; gap: 6px; }
.props input[type="range"] { width: 140px; accent-color: var(--rose); }
.picker { margin-top: 12px; }
.picker .card-item { padding: 6px; }
select.pick { min-height: 40px; padding: 6px 10px; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.family { display: flex; flex-direction: column; gap: 6px; }
.family-row { margin: 0; gap: 6px; flex-wrap: wrap; }
.family-row b { width: 18px; color: var(--ink-soft); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.motion-gif { max-width: 220px; margin: 8px 0; }
.help-files { margin-bottom: 14px; }
.help-files summary { cursor: pointer; font-weight: 600; }
.help-files li { margin: 6px 0; }
#builder-fields select.pick { width: auto; }
@media (max-width: 600px) {
  .pair { grid-template-columns: 1fr; }
  .props input[type="range"] { width: 100%; }
  select.pick { font-size: 16px; }
}